The current specification of HTML has been around for nearly 10 years now and us web developers all use this fundamental language on a daily basis. However, due to our busy schedules, there are a few HTML tags that tend to get either neglected or used in the wrong way.

I’m going to list a few of the more important tags here with some examples of their use. Hopefully this article will provide you with some guidance to why we should use them.

1. <address>

As the name suggests, the <address> tag is used to display contact details of the author of a web page. This means that you can standardised the format of either yours or your users contact details to make them easily identifiable.

The important thing to note is that the <address> tag is not limited to just a postal address, but you can include any contact details, such as a name, email, phone number, URL, etc.

For example:

1
2
3
4
5

<address>
    Written by: Ian Harris<br />
    Email: <a href="mailto:info@example.com">info@example.com</a><br />
    Phone: 01234 567 890
</address>

Although the <address>tag should be used where possible, that is a better alternative in the form of microformats. Take a look at the hCard Microformats wiki page for more information.

2. <abbr> & <acronym>

The <abbr> and <acronym> are two very similar tags that are used to provide the user with additional information about an abbreviated phrase. The <abbr> tag is used to define terms such as CMS (Content Management System). The <acronym> tag defines an abbreviated term as if it can be spoken as a word, for example Radar (Radio Detection and Ranging). These tags are incredibly useful because when the user hovers their mouse over the abbreviated phrase, the full defined description is displayed as a tool tip.

Here is the code for these two examples:

1

<abbr title="Content Management System">CMS</abbr>

1

<acronym title="Radio Detection and Ranging">Radar</acronym>

Hover over the following to see them in action: CMS and Radar

It is common practice to style these tags with a dotted bottom border so that users can identify that these tags have additional information attached to them:

1
2
3
4

abbr, acronym {
    cursor: help;
    border-bottom: 1px dotted #000;
}

Another good reason for using these tags is that they are used by screen readers and search engines to draw extra information from your content. This helps you to create accessible and search engine friendly content, which of course is what most of us are trying to achieve.

3. <cite>

The <cite> tag is used to indicate a citation and allows you to reference the source of information. This tag is probably most commonly used in conjunction with the <q> and <blockquote> tags as it allows you to specify the source of the quote.

As with the <abbr> and <acronym> tags, you can add the titleattribute to display some extra information when the user hovers their mouse of it.

For example:

1

<p><q>O Romeo, Romeo, wherefore art thou Romeo?<q> - <cite title="Romeo And Juliet Act 2, scene 2, 33–49">William Shakespeare</cite></p>

O Romeo, Romeo, wherefore art thou Romeo? – William Shakespeare

It’s worth pointing out that the <q> tag has only just been supported by Internet Explorer in version 8.

4. <del> & <ins>

The <del> and <ins> stand for deletion and insertion respectively. It’s quite common these days for an author to show the end user where content has been edited after it’s initial publication, especially when the content can be updated by more that one person. The <del>tag will add a strike-through to it’s contents, where as the <ins> will add an underline.

1

<p>My favourite type of music is <del>rock</del> <ins>reggae</ins>.</p>

This is displayed as: My favourite type of music is rock reggae.

5. <dl>, <dt> & <dd>

You are no doubt aware of the <ul> and <ol> tags and their uses, but there is another list called a definition list which looks like <dl>. In the traditional sense, this type of list should be used if you create a list of definition terms with associated descriptions. However, W3C list specification seems to indicate that you can use the <dl> tag to list any terms where there is a direct relationship between them.

The <dl> tag has two child elements which are <dt> and <dd> which stand for definition term and definition definition. There can be multiple <dd> tags associated with each <dt>.

For example:

1
2
3
4
5
6
7
8
9

<dl>
    <dt>HTML</dt>
    <dd>Hypertext Markup Language</dd>
</dl>
<dl>
    <dt>The FA Cup Final</dt>
    <dd>When: 30th May, 2009 3pm</dd>
    <dd>Where: Wembley Stadium</dd>
</dl>

This is displayed as:

HTML

Hypertext Markup Language

The FA Cup Final

When: 30th May, 2009 3pm

Where: Wembley Stadium

6. <sub> & <sup>

The final two tags in this list are subscript, <sub> and superscript, <sup>. The same results can be achieve using CSS, but whats the point when you can use these two built in HTML tags.

There usage can be seen in the following examples:

1

<p>The chemical formula for water is H<sub>2</sub>O.</p>

The chemical formula for water is H₂O.

1

<p>Today is the 12<sup>th</sup> April.</p>

Today is the 12^th April.

Conclusion

In reality, you may rarely use some of the tags listed above. However, you should definitely keep them in mind and make sure you use them correctly when the need arises. The key to writing semantic code is to use the correct HTML tags for the correct application.

Semantically written code will help you product search engine friendly and accessible content, which after all, is what we should all be doing.

Resources

• Wikipedia article about HTML
• hCard Microformats wiki
• W3C list specification