Web

The 5 Most Under-Used HTML Tags

Craig Buckler
Share

HTML tagsHTML has only a few dozen elements, but we busy developers often forget to use the right tag for the job in hand. It’s all too easy to add a <div> or a <span> when there are more suitable alternatives.

Here are five tags that may be missing from your HTML arsenal…

1. <label>
Every visible field in your <form> should have a <label>, e.g.

<label for="email" title="enter your email">email:</label>
<input type="text" id="email" name="email" />

The <label> is associated with the field’s ID using the for attribute. An optional title attribute can be used to provide further information if necessary.

Labels are useful for accessibility and clicking them sets focus to the field. In the case of checkboxes and radio buttons, the clicking the label will change the field’s state, e.g.

<p>Choose your preferred newsletter format:</p>


<input type="radio" id="format_1" name="format" value="html" checked="checked" />

<label for="format_1">HTML format</label>


<input type="radio" id="format_2" name="format" value="plain" />

<label for="format_2">plain text format</label>

Any number of labels can be associated with a single field. This could be useful when displaying validation error messages.

2. <fieldset> and <legend>
Forms fields can be grouped into one or more logical sections using <fieldset>. It is important to note that fields such as <input>, <select> and <textarea> should be wrapped in a block-level element such as a <fieldset> rather than the <form> element itself.

The <legend> element adds a caption title to a <fieldset>. Example:

<form action="formhandler.php" method="post">


<fieldset>

<legend>Personal Details</legend>


<label for="name">Name:</label>

<input type="text" id="name" name="name" />


<label for="age">Age:</label>

<input type="text" id="age" name="age" />


</fieldset>


<fieldset>

<legend>Career</legend>


<label for="job">Job title:</label>

<input type="text" id="job" name="job" />


<label for="company">Company:</label>

<input type="text" id="company" name="company" />


</fieldset>

</form>

HTML fieldset

3. <optgroup>
<select> box <option> elements can be grouped into one or more logical sections using the <optgroup> tag. The label attribute assigns a heading to the optgroup.

<label for="skillset">Your primary skillset:</label>

<select id="skillset" name="skillset">


<optgroup label="web design">

<option value="ps">PhotoShop</option>

<option value="il">Illustrator</option>

<option value="il">Fireworks</option>

</optgroup>


<optgroup label="web development">

<option value="html">HTML</option>

<option value="css">CSS</option>

<option value="js">JavaScript</option>

<option value="net">ASP.NET</option>

<option value="php">PHP</option>

</optgroup>


</select>

HTML select optgroup

4. <dl>, <dt>, and <dd>
Definition lists, such as dictionaries or contact details, can be created using <dl>. Each list should contain at least one definition term, <dt>, and definition description, <dd>, e.g.


<dl>


<dt>HTML</dt>

<dd>Your content is defined in Hyper-Text Mark-up Language</dd>


<dt>CSS</dt>

<dd>Your layout is defined using Cascading Style Sheets</dd>


<dt>JavaScript</dt>

<dd>Client-side functionality is implemented using JavaScript</dd>


</dl>

5. <q> and <cite>
<q> is similar to <blockquote> but it is used for a short quotation. <cite> contains a citation or a reference to another source, e.g.

<p><cite>Bill Gates</cite> said <q>640K ought to be enough for anybody</q>.</p>

See also: HTML: The Top 5 Forgotten Elements.

Have I missed your favourite under-used tag?