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.

W3C HTML5 specification

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>,
<a href="http://html5doctor.com/author/olib">Oli Studholme</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<br>
HTML5 Hospital,<br>
Doctorville,<br>
Great Britain<br>
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><br>
<span class="region">Doctorville</span><br>
<span class="postal-code">Postal Code</span><br>
<span class="country-name">Great Britain</span>
</p>
<p class="tel">+44 (0)XXXX XXXXXX</p>
</div>

I’ve introduced hCard 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, read our articles on extending HTML5 with microformats or HTML5’s new microdata attributes.

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.

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