The 5 Most Under-Used HTML Tags

Share this article

HTML tags
HTML 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">

<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" />



<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" />

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 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>

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.


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

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

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

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?

Frequently Asked Questions (FAQs) about Underused HTML Tags

What is the purpose of the
tag in HTML?


tag in HTML is used to create an interactive widget that the user can open or close to reveal or hide additional information. It’s a great way to manage large amounts of content that can be overwhelming if displayed all at once. The content within the
tag is hidden by default and is shown when the user triggers it, usually by clicking on it.

How does the tag work in HTML?

The tag in HTML is used to highlight parts of the text. It’s useful when you want to draw attention to a specific section of your content. The default style for the tag is a yellow background, but this can be customized using CSS.

Can you explain the use of the tag in HTML?

The tag in HTML is used to represent either a scalar value within a known range or a fractional value. It’s a great way to visually represent data, such as disk usage, the relevance of a search result, or the fraction of a voting population to have selected a particular option.

What is the function of the

tag in HTML?


tag in HTML is used to group related elements in a form. It draws a box around the related form elements and can be associated with a tag to provide a caption. This helps improve the user experience by making forms more readable and organized.

How does the tag work in HTML?

The tag in HTML is used to embed images in a webpage. It has several attributes like ‘src’ (which specifies the image URL), ‘alt’ (which provides alternative text for the image if it cannot be displayed), and ‘height’ and ‘width’ (which specify the dimensions of the image).

What is the purpose of the tag in HTML?


tag in HTML is used as a header for the
element and provides a summary or caption for the content that is hidden or shown. It’s clickable and triggers the opening or closing of the

How can I use the
tags in HTML?


tag in HTML is used to mark up a photo in a document, and can be associated with a caption using the
tag. The
element can be placed as the first or last child of the

What is the function of the


Can you explain the use of the tag in HTML?


tag in HTML is used to create a dialog box or a popup window. The dialog box can be modal (i.e., it requires the user to interact with it before they can go back to operating the page) or modeless (i.e., it allows the user to interact with the rest of the page even when the dialog box is open).

How does the tag work in HTML?

The tag in HTML provides a list of pre-defined options for an element. The user can select one of these options or enter a value. The tag is associated with its element using the ‘list’ attribute of the element.

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week