10 HTML tags which are not used as often as they deserve

Apart from the most common tags like <a> and <img>, there is a whole set of underused tags in the HTML specification with a rich semantic and potential power for markup. In the years before the advent of CSS, developers were justified in always using the same tags in order to control their presentation, which varied with the markup instead of custom rules. Just think of <b> and <font>.

Now that CSS are well-supported, there is no reason to not embrace the right tag for the right job, and start including the following tags in your markup. Browser support is also very good for the tags themselves: they're older than you think.

I'm not talking about fillers lyke <acronym> or <abbr>: I know they're not so useful and you'll never include one for every abbreviation in your body copy. These tags are not life-changing, but they make a difference in usability and code clarity. If you're unsure what would be displayed by some of the snippets, I encourage you to try them in your browser. They were tested and functional in Firefox 3.6.

1. <fieldset> is a way to group a set of form fields such as inputs or textareas. It's not a usability advantage to have long forms, but when you must you can divide the form in several sections using this block element.

2. <legend> goes hand in hand with <fieldset>: when you insert it into a fieldset, its content will be displayed as the title of the group of fields:

<form>
<fieldset>
    <legend>My fields<legend>
    <p>Enter your name... <input type="text" name="nickname" /></p>
</fieldset>
</form>

3. <label> has both a semantic and practical power which I commonly never seen employed for the good. A label should be associated with a form field in one of the two ways I will show. When the label is linked to the field this way, it acts as an extension for it; for example, clicking on the label of the checkbox will turn on and off the box itself. Instead, clicking on the label of a text field would give the focus to it and put the cursor in it, making the user ready to write. Thus, labels extend the clickable area available to the users.

But that's not all. Labels have also a semantic association with form elements, and as such are read out by screen readers when they access a form. There's no reason to invent styled <div> tags for your forms: put in labels instead.

You can link a label to a field by including the field in the label itself:

<label><input type="checkbox" name="agree" /> I agree to the terms and conditions</label>

Or you can use an id on the input tag which you refer to in the label. Which method you should use is a matter of simplifying the application of styles to both elements.

<label for="nickname">Nickname</label>
<input type="text" id="nickname" name="nickname" />

4. The <button> block element is by far more flexible than its cousin <input type="button"> and <input type="submit">. The reason is you can nest other tags in <button>'s content.

Thus you can go from a simple button:

<input type="button" value="A button" />

to a more complex one:

<button><strong>A strong button</strong></button>

5. <dl> stands for Definition List. It is the equivalent of <ol> and <ul> when the basic element is a tuple composed of two values: name and content. This were originally used for glossaries, but you can find many more creative solutions in the web.

6. <dt> is the definition term, used in the definition list above. Stay tuned for three rows to see a code sample which involves both.

7. <dd> is the definition content.

For instance, Zend Framework by default renders forms like this:

<form>
<dl>
    <dt>Nickname:</dt>
    <dd><input type="text" name="nickname" /></dd>
</dl>
</form>

And it's indeed a way to delete some of the <div class="label"> rules.

8. <optgroup> is used to group options inside a select element. When there are many <option> tags, a simple layer of hierarchy can go a long way in aiding the user in its choice. Only the options themselves would be selectable, but the optgroup labels would acts as a title for the group.

<select name="enemy">
    <optgroup label="Milky Way">
        <option value="Apophis">Apophis</option>
        <option value="Anubis">Anubis</option>
        <option value="Replicators">Replicators</option>
    </optgroup>
    <optgroup label="Pegasus galaxy">
        <option value="Wraith">Wraith</option>
        <option value="Genii">Genii</option>
    </optgroup>
</select>

9. <blockquote> is a block element dedicated to quoting other sources. It's probably one of the most adopted of the tags described in this article. You can saygoodbye to <div class="quote"> if you haven't already.

10. <col> and <colgroup>, when inserted between a <table> tag and its contents, respectively act as placeholders for a column or a columns set. Whenever you want to apply column-based styles, instead of repeating classes on all the cells of the table you can simply organize them around columns:

<table>
    <col style="background-color: grey;" />
    <col style="background-color: blue;" />
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
</table>

I hope you have gained some tips which you weren't aware of - feel free to add your commonly neglected HTML tags in the comments if you feel they would be actually useful.