10 Underused HTML Elements & How You Should be Using Them

All the hype recently has been about Html5, and the new elements it brings to the table for us to use. However, the way I see it, we currently don’t even utilise all that the current version of html has to offer. There are several really useful elements available to use, that make our code more semantic, our website more usable, and in general, everything easier for both us, the coder, and the end-user of our site.

1. label

Description

The

Usage

The <label> tag should be placed next to their relevant form controls in your code. The only real requirement of the <label> tag is that it’s “for” attribute should be equal to the id attribute of the form control it is related to. This allows them to be linked together by the browser for the usability enhancements. Here is an example

<label for="name">Your Name</label>
<input type="text" id="name" />

Styling

The label element has become quite popular recently, and while it still isn’t used by everyone, it’s styling, and some creative uses have been conjured up. Check these links out below for further ideas.

2 & 3. fieldset & legend

Description

The <fieldset> tag is used to logically group together elements in a form. Basically, the <fieldset> tag draws a box around the form elements it contains to separate them from other elements or <fieldset>’s in the form. The <legend> tag is then used to define a caption for its specific fieldset.

Usage

The <fieldset> and <legend> tags can, and really should be used in any form. They allow you to describe, and split up forms into relevant sections.

<form>
  <fieldset>
    <legend>Personal Details</legend>
    <label for="firstname">First Name</label>
    <input type="text" id="firstname" />
    <label for="lastname">Last Name</label>
    <input type="text" id="lastname" />
  </fieldset>
</form>

Styling

There are plenty css tutorials out there for styling forms, and the vast majority of them, as they should, make use of the <fieldset> and <label> tags. Check out these links for styling ideas.

4. optgroup

Description

The <optgroup> tag is used to group together related options in a select (dropdown) list. This can often make long lists of options easier for users to navigate, and handle.

Usage

The <optgroup> tag simply wraps the options within it, with the title being added to it via an attribute called “label”. Here is some sample markup for a <select>.

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Styling

As is usual with form element styling in browsers, support is fairly limited, and nowhere near being standard across browsers. The default seems to be bold headers within your dropdown.

5. dl

Description

The <dl> tag defines a definition list. Basically the <dl> tag is uses with <dt> which defines the item in the list, and <dd> which described the current item in the list. This makes it useful for a lot of things, such as dictionary style lists, and other things such as contact details, and so on.

Usage

This example usage I am going to show is an example for how I’d used the definition list on a contact page.

<dl>
  <dt>Email</dt>
  <dd>email@domain.com</dd>
  <dt>Location</dt>
  <dd>Here</dd>
  <dt>Phone</dt>
  <dd>+0123456789</dd>
  <dt>Skype</dt>
  <dd>myname</dd>
</dl>

Styling

Definition lists are quite flexible and can be used for plenty things. This article shows some of these.

6. cite

Description

The <cite> tag contains a citation or a reference to other sources. It is usually used to wrap the name of the source of a quote, or resource.

Usage

The <cite> tage is basically used to provide a reference, usually with a title attribute to provide full source information such as below.

According to <cite title="HTML & XHTML: The Definitive Guide. Published by O'Reilly Media, Inc.; fifth edition (August 1, 2002)">Chuck Musciano and Bill Kennedy</cite>, the HTML cite tag actually exists!

Styling

<cite> tags are generally styled as italics, and most browsers normally do this automatically. The title attribute is shown on hover.

7. blockquote

Description

The <blockquote> tag defines a long quotation. It can be used with the <cite> tag, and is usually used for testimonials, and pull quotes.

Usage

The <blockquote> tag basically wraps the quote, and can be used along with <p>, and <cite> as well as other tags for further styling.

<blockquote>
This is an example of a blockquote which is not inline, and is long!
</blockquote>

Styling

There are two universally accepted styles for blockquotes, but there are plenty other ideas out there as well. Here they are below.

8. code

Description

The <code> tag is used to display computer code text. This is usually displayed in a different font with characters that are all the same size.

Usage

You should pretty much always use your <code> tag wrapped in the <pre> tag. This basically preserves all spacing, and tabbing in your code.

<pre>
  <code>
    .classname {
      /** Code goes here **/
      /** Code goes here **/
      /** Code goes here **/
    }
  </code>
</pre>

Styling

9. colgroup

Description

The <colgroup> tag is used to group columns in a table for easy formatting. Instead of applying styles to each individual column cell, you can simply apply it to the <col> in the <colgroup> and it will be applied to the entire column.

Usage

This below example shows how <colgroup> and <col> should be used in the markup of a table. You can then apply class’s to each <col> rather than every <td> in that column to style that column.

<table>
  <colgroup>
    <col />
    <col />
    <col />
  </colgroup>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
</table>

10. acronym

Description

The <acronym> tag, funnily enough, defines an acronym. An acronym can be spoken as if it were a word, example NATO, NASA, ASAP, GUI. By marking up acronyms you can give useful information to browsers, spell checkers, screen readers, translation systems and search-engines.

Usage

The acronym tag works in pretty much the same way as the <cite> tag does, in that you simply hover over it to see the full acronym.

Can I get this <acronym title="As soon as possible">ASAP</acronym>?

Matthew Corner

Matt is an 18 year old web designer from Scotland, UK. He loves creating beautiful websites across different platforms. High on his things to learn fully are Jquery and php. He is extremely excited by css3 and html5 and can't wait to see them rolled out fully. To learn more about Matt, follow him @QwibbleDesigns, or check out his portfolio.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. muyeshi2000 says

    I thought ACRONYM tag was stopped in HTML5. We now use ABBREVIATION only.

  2. Marcus Tucker says

    Good article!

    However, your example image for fieldset & legend doesn’t actually show a legend, and therefore the fieldset isn’t clear either (it just looks like an image border)

    • Marcus Tucker says

      Just realised that I was confused by the image because it doesn’t relate to the code shown above it – so it does in fact show a legend but this isn’t immediately obvious, and the fieldset isn’t obvious too because only the top line is displayed.

      It would be much better if the example image DID correlate to the example code, and was shown with default browser styling (i.e. unstyled).

  3. mario says

    colgroup and col are useful for lengthy tables. All browsers delay page display until a significant portion of a table structure is loaded to minimize resizing effects. With colgroup and col you pre-define the widths and make resizing unneccessary. Henceforth colgroup is very essential for table-based layouts. For smaller data tables it’s seldomly required.

  4. says

    Outstanding buddy, these were really rarely used, interesting thing is if we blend it with CSS3 and Jquery. That can make great user interaction interface.

  5. says

    Some of them are bogus and unusable :

    Fieldset and Legend cannot be correctly and coherently skinned.
    Acronym is depreciated in HTML5
    Col and Colgroup aren’t supported correctly both with webkit and gecko (it’s even one of the oldest still opened bugzilla #915 and #2212)

    • Kidlepra says

      “Fieldset and Legend cannot be correctly and coherently skinned.”

      Not being able to ‘skin’ an HTML element is not a reason for not using it. If you want to create correct and semantic markup both of these should definitely be used when creating forms!

      • Tomas says

        Personally I think if you want a specific look/design/interaction you use the best method. Why use something because it’s a nice “semantic markup” but haven’t anything else in advantage. The user experience should be in focus.

  6. Jonathon VS says

    I agree. The more unconventional HTML tags you use, the fewer classes you use, and the more presentational elements you can move into your CSS, the cleaner and more semantic your HTML document will be.

    There are some reasons why some of these elements aren’t used often, though. <optgroup> looks different in almost every browser, and <colgroup> only lets you assign widths and vertical alignments, not useful things like background images and font styles. <cite> has some semantic usefulness, but since it doesn’t conform to any university citation style (e.g. APA, MLA, CBE), it isn’t widely used.

    Out of all the elements you mentioned, though, my favourite has got to be the definition list. Definition lists are perfect for FAQs and they make JavaScript accordion folds much easier to code. (We have to be careful, though, because there’s a trend these days to use them for tabular data, which is dangerous because a table would probably make more semantic sense and be easier to style.) One unfortunate casualty of the loss of XHTML 2 was the <di> element, which (optionally) grouped terms and definitions into "definition items". This was a brilliant idea and I’m really disappointed that it was axed. However, certain new elements like <figcaption> in HTML 5 make current uses for the definition list more meaningful.

    Just as a note, the <acronym> element has been deprecated in favour of the abbr element (it’s actually been removed from HTML 5). It’s a shame, but they really are two sides of the same coin, so it’s no huge loss.

    If I were to add any elements to your list, I’d include <address>, <caption>, and <dfn>, but you’ve got a good list here.

  7. says

    This is a great run down for people who either don’t know or forgot about most of these tags in this list. Great list of Links as well. Thanks a lot!

  8. paul says

    In the new HTML5 specification, the cite tag now means the title of a work, and the acronym tag is obsolete

  9. George says

    Good article, although I think there are more obscure tags you could have mentioned. I regularly use all of the above mentioned, perhaps not colgroup as much as I should.

    Some you could have mentioned would be acronym, abbr, ins, del, blockquote, cite etc. I’m sure there are more though :)

    +1 for mentioning labels though. So many sites are made without them, it’s ridiculous to think some web developers don’t see the benefits of using them! Such a great usability element, especially when it comes to stuff like check boxes and radio buttons.

  10. says

    I have been relying heavily on label, fieldset, legend, and dl, dt, dd for a lot of projects lately. The form element tags have saved a lot of time once our styles were written for them. It was also very easy to explain to newcomers and they picked up the markup very quick.

  11. Ignas says

    Nice article ;) I’m using them in my projects, but I’m sure that there are a lot of people who just forgot about these nice tags.