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:

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

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

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

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:

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

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

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

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

The chemical formula for water is H₂O.

<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

1. ‘Previous Page’ link

This snippet will take the user back to the previous page that they have viewed. Pretty much like the standard browser back button really:

<a href="javascript:history.back(1)">Previous Page</a>

2. ‘Print this page’ links

I’ve read quite a few mixed opinions about adding a link that allows users to print the current page. Some developers think that their users will already know how to print the page using the browsers toolbar and don’t need us cluttering our pages with unnecessary links. Others believe that we should make it easy for the user and remind them that they can print this content if they so wish. I am with the latter, but whatever your opinion, here it how you add a print link:

<a href="#" onclick="window.print();return false;">Print</a>

3. Close the current browser window

On occasions, you might need want to give the user the option to easily close the current browser window. For example, you have created a CMS that uses pop-up top display information. This snippit will close the current browser window (or tab):

<a href="javascript:window.close();">Click to Close</a>

4. Confirm prompt

If you are asking the user to perform a certain action, like deleting something, you can prompt them to confirm that they definitely want to go ahead. This snippit intercepts by prompting with a Yes/No box and a message of your choice. If the user selects Yes, it will carry on to the URL in the link. Selecting No will just cancel the action.

<a href="delete.php" onclick="return confirm('Are you sure you want to delete this?')">Delete</a>

5. Replace broken images

Sometimes you may link to images that are hosted on other domains, such as photos in your Flickr account. As this is external, you cannot guarantee that this content will always be available and if the site hosting the image was to go offline, you would be left with that nasty red cross that gives the impression that you don’t look after your site. The snippet below will display a default image if the external image is unavailable (obviously, you should only link to images where you have permission to do so, nobody likes a bandwidth thief).

<img src="http://www.mydomain.com/image.jpg"
onerror='this.src="/images/unavailable.png"' />

I hope these are useful to you, they have certainly helped us. Thanks.

You can see how it is easy to get it wrong though, take a look at the Wikipedia list of UK counties. The list of counties has changed quite considerably over time, especially in Wales.

As we were only interested in postal addresses for the web form, we decided it would be quicker and easier to compile our own list using the postal county data in this Wikipedia article. So here is a zipped file containing the HTML list as well as a XML list we created of the current UK postal counties. We hope this helps you out in some way. It may be worth just keeping these lists on file somewhere, you never know when you may need them.

Resources

• Wikipedia list of UK counties