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:
Code : <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:
Code : <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.
Code : <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:
Code : <input type="button" value="A button" />
To a more complex one:
Code : <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.
Code : <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.
