The address element has been around since the HTML3 spec was drafted in 1995, and it continues to survive in the latest drafts of HTML5. But nearly fifteen years after its creation, it’s still causing confusion among developers. So how should we be using address in our documents?

The right way

Let’s take a quick look at the spec:

The address element provides contact information for a document or part of a document. Information provided by address may include the names of the document’s maintainers, links to the maintainers’ Web pages, e-mail addresses for feedback, postal addresses, phone numbers, and so on. The address element is not appropriate for all postal and e-mail addresses; it should be reserved for providing such information about the contact people for the document.

If we follow the above advice, we could do something like this:

The HTML5 Doctor is run by the following group of volunteers:
<address>
<a href="http://html5doctor.com/author/jacko">Jack Osborne</a>,
<a href="http://html5doctor.com/author/richc">Rich Clark</a>,
<a href="http://html5doctor.com/author/miker">Mike Robinson</a>,
<a href="http://html5doctor.com/author/toml">Tom Leadbetter</a>,
<a href="http://html5doctor.com/author/brucel">Bruce Lawson</a>,
<a href="http://html5doctor.com/author/remys">Remy Sharp</a>
</address>

Here’s another example that we’ve implemented on this very site:

<footer>
<div class="vcard"> by
<address class="author">
<em class="fn"><a title="Posts by Jack Osborne" href="#">Jack Osborne</a></em>
</address> on
<time datetime="2009-11-04" class="published updated">November 4th, 2009</time>
</div>
</footer>

If you view the source code on our home page, you’ll see that we’ve used the address element — nested within the footer of the articles — several times throughout the page. This is useful should the information be aggregated.

The wrong way

The most common misconception about the address element is that it should be used to mark up any old address. Take a look at the following example:

<!-- This is bad! -->
<address>
Dr. Jack Osborne
HTML5 Hospital,
Doctorville,
Great Britain
Tel: +44 (0)XXXX XXXXXX
</address>

Wondering what’s wrong with this code? Very simply, the address element was not created for postal addresses. To reinforce this, the latest spec stipulates that the address element must not be used to represent arbitrary addresses (e.g., postal addresses), unless those addresses are in fact the relevant contact information for a document or section of a document.

Marking up arbitrary addresses

So what should we do with addresses that aren’t directly related to the document? One solution is to use the p element in combination with the hCard microformat.

Let’s rewrite that last example using hCard:

<div class="vcard">
<p class="fn"><a class="url" href="#">Dr. Jack Osborne</a><p>
<p class="adr">
<span class="street-address">HTML5 Hospital</span>
<span class="region">Doctorville</span>
<span class="postal-code">Postal Code</span>
<span class="country-name">Great Britain</span>
</p>
<p class="tel">+44 (0)XXXX XXXXXX</p>
</div>

Unfortunately, an in-depth discussion of hCard is beyond the scope of this article. I’ve included it here to reinforce that you are not supposed to use the address element for arbitrary postal addresses, but rather for providing contact information for a whole document or section of a document. If you want to maximise the semantic value of that information, you can do so with the addition of a couple of simple classes.

If you don’t feel comfortable implementing microformats on your own, visit the hCard generator, which will do all of the heavy lifting for you.

Share and Save:

The Address Element originally appeared on HTML5 Doctor on November 3, 2009.