Marti's blog

There's a bunch of HTML tags we use all the time, sometimes too much, like div which some people feel they must put around every possible other tag. Then there are some that we rarely use, for lack of opportunity or lack of knowledge. But if you have any commitment to making your web pages easy on users, search engines and peoples with disabilities, then you might want to have a second look at the followings:

1. <abbr title="Abbreviation">Abbr.</abbr> The abbreviation tag is used to mark-up... abbreviations. Use the title attribute to give the full word that you abbreviate (browsers will usually render it in a way that let's people find out about it).
2. <acronym title="Personnal Computer">PC</acronym> Works pretty much like the abbr tag, except this one is for acronyms (you do know the difference, right ?).
3. <label for="username">Your user name</label> The label tag is used to mark a portion of HTML as the label for a specific form field (text, checkbox, etc.). It's very useful for blind people as their web browser will be able to figure out what each form field is about, even if labels are not located next to their relevant field. For a graphic browser like Firefox, clicking on the label content puts the focus on the relevant field. Use the for attribute to give the id if the form field you want to label.
4. <address>John Doe, 12345 main Street, Somewhere</address> Well this one is self explanatory. HTML inside it (line breaks and such) is of course allowed.
5. <fieldset><legend>About you</legend>...</fieldset> The fieldset tag is used to group relevant parts of form fields together. If you have for example a big form with a section for the user, a section for his preference, etc. then you can group fields into fieldsets, and use the legend tag to name the section (saddly the default visual effect looks much better in Internet Explorer than Firefox, but you can style this tag with CSS).
6. <del>Some deleted stuff</del> The s and strike tags are deprecated because they carry no semantic information and you can render striked text with CSS. But if you want to mark something as deleted (and not just text either), there's the del tag that by default renders text as strikethrough.
7. <... lang="fr">du texte en français</...> OK this one is not a tag but an attribute that most HTML tags support. The lang attributes lets you define part of your page as written in another language, and since it is also available on the html tag, to also defines the default language of your whole page (important for search engines).
8. <tbody>...</tbody> Tables have been around for a while, but few people use the thead, tbody and tfooter that marks which row(s) represent the head, body and footer of their table (for example Firefox makes use of them when printing tables over multiple pages).
9. <noscript>Turn on your Javascript !</noscript> The noscript tag lets you display something if (and only if) the browser doesn't support Javascript (or has it turned off). Rather than letting users with such browsers in the cold because your nifty scripts can't run, you can use this tag to give them an alternate content to see.
10. <button type="submit" name="submit_button" value="1">My pretty button</button> Everybody has gotten used to making form buttons with the input tag. However these buttons are text only and requires some CSS trickery to make them a bit pretty. Well the button tag is another way of doing form buttons, but it has the advantage of accepting any HTML (including images) within it, so you can be more creative.