The 5 Most Under-Used HTML Tags

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?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • enjay

    I used all these most of the time. TABLE is the one I find less use aside from the backend.

  • Rich

    The address tag is woefully underused I’ve always thought.

  • Vadim P.
  • David Eglin

    Really? You think that <label> and <dl> etc are underused? In my experience, anyone who uses html on a day to day basis, certainly anyone who has even a remote understanding of semantic html, uses <label> all the time within forms (also fieldsets… although not as much, and legend could do with being used more, i’ll admit), and I personally have worked with developers who seem to duffer from “definition list-itis”, using them waaaay too often, and for things that you really shouldnt.

    I think the important thing at the end of the day, is not to point out underused tags, but to drive home the importance of using whatever ta is semantically appropriate for the information it holds.

  • jameslindeman

    How about <!DOCTYPE>. Still surprised how often this is missing.

  • http://www.broken-links.com/ stopsatgreen

    Sorry; the 5 most under-used according to who, exactly?

  • http://www.studio-gecko.com/ XLCowBoy

    I use those tags all the time. Address for addresses, labels with the proper “for” matching the input’s ID, etc. etc.

    Most underused? I would say the ones that are remotely connected to styling.

  • strontium87

    I’m surprised how many forms don’t use tags but I have to say, I didn’t even know about the tag! I’ll be using that from now on.

  • strontium87

    Sorry for the double-post; I didn’t read the instructions.

    I’m surprised how many forms don’t use
    <label> tags but I have to say, I didn’t even know about the
    <optgroup> tag! I’ll be using that from now on.

  • W

    This is definitely a worthwhile read for hobbyist web designers. I’ve used HTML and CSS years, conforming to the standard, but I’ve only rarely come across some of these. The author is right though, when you’re trying to drag something together quickly, it’s easier to cobble it together with some spans and divs and still have it standards compliant, well when you haven’t heard of these tags.

    I know they’re not tags, but I’ve always felt that things like specifying access keys are rarely done. Accessibility is very poor on a lot of websites.

    I think the blink tag is under used ;) *hides*

  • chris

    Be careful with the address tag, it should not be used for physical locations. If you need to markup a street address then you should consider using microformats.

    Personally, thead and tbody have come to my rescue on my latest project, if only for styling.

  • thegnome

    I think the important thing at the end of the day, is not to point out underused tags, but to drive home the importance of using whatever ta is semantically appropriate for the information it holds.

    David Eglin

    Excellent statement and exactly why W3C documentation exists. The trouble is the human factor involving interest and proper reasoning skills in order to use each tag where it belongs so that the overall structure is semantic. I’m astounded by how many developers apparently don’t understand the meaning of “semantic”. I love it when I come across a site properly using <abbr> or <acronym> tags properly or even at all.

  • Jade Ohlhauser

    Nice work, cite and q are new to me. I’ve got plenty of places to start using those.

    Too bad you had to perpetuate that false Bill Gates quote.

  • Josh

    I’m surprised is left out.

  • Josh

    I’m surprised is left out

  • Josh

    Bloody html stripper

  • http://www.tyssendesign.com.au Tyssen

    Address for addresses

    Address should only be used for the document author’s address, not just for any address that needs to be displayed on a site. I don’t often use <address> anymore as I tend to mark addresses up as Microformats vcards instead (although I s’pose the containing block could still be an <address>).

    Out of the ones you’ve listed I hardly ever use optgroups, but that’s because I never have select lists that get that complicated.

    Bloody html stripper

    The instructions about how to post code are directly under the box in which you type your reply. ;)

  • http://www.studio-gecko.com/ XLCowBoy

    Address should only be used for the document author’s address, not just for any address that needs to be displayed on a site.

    Yes, I use it the same way. Although I haven’t gotten round to utilizing Microformats yet.

  • http://www.patricksamphire.com/ PatrickSamphire

    <q> and <cite> are so underused, I wonder if they really serve much practical function anymore.

  • Andrew

    jameslindeman: doctype isn’t an underused HTML tag because it’s not an HTML tag. :)

  • http://www.sitepoint.com/ mmj

    <ins> and <del> are pretty interesting elements. In HTML they are the only elements that are allowed anywhere in a document body, regardless of which element they are inside. In XHTML 1.0, they represent the only valid way that a block level element can be included inside an inline element. Due to limitations of the DTD language, the following is valid. Call it a ‘loophole’ in DTD, the language used to validate web pages.

    
    
    <span>
      <ins>
        <div>
          This is a div inside a span, but it's valid...
        </div>
      </ins>
    </span>
    
    

    Of course I would strongly advise against doing so unless you really want to convey the true meaning of the <ins> or <del> elements – ie, contents that have been inserted or deleted.

  • Tarh

    Sorry; the 5 most under-used according to who, exactly?

    Indeed.
     
    Also, has this post been submitted to a peer reviewed journal? Can you please provide all of the references that you used to write this post, as well as your data samples for these findings? Also, a reference from a public servant and a photocopy of your birth certificate would be highly appreciated.
     
    </sarcasm>

  • http://www.sitepoint.com AlexW

    I really like <q> but I think it’s suffered from it’s spotty browser implementation. From memory good browsers add the quote marks automatically, but IE doesn’t, so you either get too many quotes or not enough.

  • http://www.optimalworks.net/ Craig Buckler

    I really like <q> but I think it’s suffered from it’s spotty browser implementation … good browsers add the quote marks automatically, but IE doesn’t

    The easiest way to handle the problem in CSS is to remove the quotes from all browsers, e.g.

    q:before, q:after { content: ""; }

    If you then need quotes, you can then add them back in using a background image or another appropriate technique.

  • http://meiert.com/en/ j9t

    Repeating the question: On what data is this article based on?

  • UrbanDenim

    Who still uses HTML anyway?? Design your sites/forms in a program like Dreamweaver, and it will write the code for you. And you will end up with a much nicer looking site at the end of it all.

  • http://www.optimalworks.net/ Craig Buckler

    On what data is this article based on?

    Various sources, but especially research gathered by resources such as Opera’s MAMA project.

    Missing form <label>’s are everywhere, though!

  • theredgiant

    Great article. Some more tags are discussed here

    5 obscure HTML tags that you should know and even use

  • http://www.sitepoint.com/ mmj

    Who still uses HTML anyway?? Design your sites/forms in a program like Dreamweaver, and it will write the code for you. And you will end up with a much nicer looking site at the end of it all.

    I don’t even use Dreamweaver anymore. I built a robot to do that for me, while I sit back with a cool margarita. The robot designs my site in Dreamweaver for me, which in turn writes my code, and I end up with a much nicer looking site at the end of it all.

  • David Hucklesby

    My solution to the Q tag not being fully supported in IE is to use a small .htc file that I created. Much easier than deleting, then adding back quotes, especially if you use “curly” quotes and have nested quotes.

    Of course, this does not work for visitors that have IE’s security settings set to “high” – so I add coloring and/or italics to quoted text for this eventuality.

  • Anonymous

    According to Opera, only 15% of the forms contains a label element. And from my experience, I was almost surprised that so many used it…

    <label> is probably the most underused semantical tag in forms. I see many have “seen the light” and uses CSS to layout a form, but still uses div/span to format a label.

  • http://www.para-diddledesign.com somecallmejosh

    @Rich,

    I used to use the address element alot, but now I use hCard microformat instead. http://microformats.org/wiki/hcard

  • danieldigriz

    Good work. I found it a fascinating visit, and just the right size for a post like this. Nice job.

  • PetFoodz.Info

    Are these original tags? Or Tags that have been implemented in later HTML standards?

  • jerry jiang

    ALL of them are very usefull when i build my website~~

  • http://www.optimalworks.net/ Craig Buckler

    Are these original tags? Or Tags that have been implemented in later HTML standards?

    Most were introduced in HTML 4.0, so they’ve been around over 10 years!

  • uxgeoff

    Great article. If you’re wanting to just see what every current HTML tag looks like on one page, check out Show Me HTML. Hope you find it useful (I do).

  • madr

    Great article! I believe it would have a bigger effect in another forum than sitepoint, though; people here tend to write semantic markup.

  • memco

    To those recommending the microformat for addresses: do you do this under the auspice that people can actually use that data in other programs or just that it’s a handy feature to have on top your code? I’m not too hip on having a div or span for every single element. However, I’m also conflicted by having to use br tags after every piece of information. All in all, I just feel like it’s hopeless no matter which way I go.

  • http://www.atouchofcare.co.uk Paul Nash

    Excellent article. I have been and will be using the , and tags; a little thin on . and unknown to me; bad boy! Thanks very much.