10 Underused HTML Elements & How You Should be Using Them

Posted in Web Design • Posted on 21 Comments

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@[email protected]</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>?

20 Written ArticlesWebsite

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.

21 Comments Best Comments First
  • paul

    Friday, August 20th, 2010 16:47

    6

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

    +2
  • Zehra Nasif

    Friday, August 20th, 2010 15:55

    2

    Fantastic post Matthew; thanks for sharing.

    0
  • Revangel

    Saturday, August 21st, 2010 12:12

    9

    Great post! Really interesting and useful. Thanks for sharing!

    0
  • Da Scritch

    Saturday, August 21st, 2010 13:02

    10

    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)

    0
    • Kidlepra

      Monday, August 23rd, 2010 11:05

      12

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

      -1
      • Tomas

        Tuesday, August 31st, 2010 14:23

        17

        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.

        0
  • Jonathon VS

    Friday, August 20th, 2010 20:01

    8

    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.

    0
  • sam

    Friday, August 20th, 2010 14:49

    1

    it really useful info for me.great thanks for all information

    0
  • Ignas

    Friday, August 20th, 2010 14:00

    3

    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.

    0
  • Blain Smith

    Friday, August 20th, 2010 21:01

    4

    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.

    0
  • George

    Friday, August 20th, 2010 15:07

    5

    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.

    0
  • Jay Khatri

    Sunday, August 22nd, 2010 16:04

    11

    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.

    0
  • Charles

    Thursday, September 2nd, 2010 08:51

    18

    Nice tips. I use some of them but cite and optgroup …

    0
  • Aaron Bassett

    Thursday, October 7th, 2010 14:22

    19

    As you use acronym, which has been removed in HTML5 (use abbr instead) I am going to assume your examples are in HTML 4 or XHTML. Which means your blockquote example is incorrect.

    Blockquotes in HTML 4 can only contain block elements[1] so your text should be wrapped in a p tag.

    [1]: http://www.w3.org/TR/REC-html40/struct/text.html#h-9.2.2

    0
  • muyeshi2000

    Sunday, April 17th, 2011 10:51

    20

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

    0
  • Darren

    Monday, July 25th, 2011 14:32

    21

    Good approximation for the uninitiated in html5. Thank you Matthew ; )

    0
  • Marcus Tucker

    Wednesday, August 25th, 2010 13:30

    15

    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)

    0
    • Marcus Tucker

      Wednesday, August 25th, 2010 13:44

      16

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

      0
  • Rupnarayan Bhattacharya

    Monday, August 23rd, 2010 21:05

    13

    Surely they are underused but useful. I can tell you one more html element which is underused which is used to give superiority over another element.

    0
  • mario

    Tuesday, August 24th, 2010 09:01

    14

    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.

    0
  • Chad Pierce

    Friday, August 20th, 2010 19:24

    7

    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!

    -1
  • Darren

    Monday, July 25th, 2011 14:32

    21

    Good approximation for the uninitiated in html5. Thank you Matthew ; )

    0
  • muyeshi2000

    Sunday, April 17th, 2011 10:51

    20

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

    0
  • Aaron Bassett

    Thursday, October 7th, 2010 14:22

    19

    As you use acronym, which has been removed in HTML5 (use abbr instead) I am going to assume your examples are in HTML 4 or XHTML. Which means your blockquote example is incorrect.

    Blockquotes in HTML 4 can only contain block elements[1] so your text should be wrapped in a p tag.

    [1]: http://www.w3.org/TR/REC-html40/struct/text.html#h-9.2.2

    0
  • Charles

    Thursday, September 2nd, 2010 08:51

    18

    Nice tips. I use some of them but cite and optgroup …

    0
  • Marcus Tucker

    Wednesday, August 25th, 2010 13:30

    15

    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)

    0
    • Marcus Tucker

      Wednesday, August 25th, 2010 13:44

      16

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

      0
  • mario

    Tuesday, August 24th, 2010 09:01

    14

    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.

    0
  • Rupnarayan Bhattacharya

    Monday, August 23rd, 2010 21:05

    13

    Surely they are underused but useful. I can tell you one more html element which is underused which is used to give superiority over another element.

    0
  • Jay Khatri

    Sunday, August 22nd, 2010 16:04

    11

    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.

    0
  • Da Scritch

    Saturday, August 21st, 2010 13:02

    10

    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)

    0
    • Kidlepra

      Monday, August 23rd, 2010 11:05

      12

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

      -1
      • Tomas

        Tuesday, August 31st, 2010 14:23

        17

        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.

        0
  • Revangel

    Saturday, August 21st, 2010 12:12

    9

    Great post! Really interesting and useful. Thanks for sharing!

    0
  • Jonathon VS

    Friday, August 20th, 2010 20:01

    8

    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.

    0
  • Chad Pierce

    Friday, August 20th, 2010 19:24

    7

    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!

    -1
  • paul

    Friday, August 20th, 2010 16:47

    6

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

    +2
  • George

    Friday, August 20th, 2010 15:07

    5

    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.

    0
  • Blain Smith

    Friday, August 20th, 2010 21:01

    4

    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.

    0
  • Ignas

    Friday, August 20th, 2010 14:00

    3

    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.

    0
  • Zehra Nasif

    Friday, August 20th, 2010 15:55

    2

    Fantastic post Matthew; thanks for sharing.

    0
  • sam

    Friday, August 20th, 2010 14:49

    1

    it really useful info for me.great thanks for all information

    0

Comments are closed.

54.234.163.230 - unknown - unknown - US