The Address Element

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:
  • Twitter
  • Digg
  • Sphinn
  • Reddit
  • del.icio.us
  • StumbleUpon
  • Technorati
  • Netvibes
  • Facebook
  • Google Bookmarks
  • FriendFeed
  • HackerNews
  • LinkedIn
  • NewsVine
  • Tumblr

This article was written by Jack Osborne. A Front End and User Experience Designer living in the west coast of Scotland. Catch Jack on twitter or his own site where more often than not you will find him writing about css3 selectors, food and music.

Posted on

Got anything to add or ask? then leave a response,
or trackback from your own site.

Categorised under: Elements.

Tagged with: , , .

23 Responses to “ The Address Element ”

Comment by Aaron Bassett at

I might be missing something but why shouldn’t you use it for a postal address? I understand that it should only be used to mark-up the contact details for the document (or document section) maintainer and not every address that appears on a site. But if the maintainer’s contact details include a postal address, why shouldn’t you use the address element? The spec actually says that in that case it should be used:

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 emphasis is mine.

I always understood it that you should not use the address element when you were referring to a entity who is not the document owner/maintainer. For example in a business directory, like Yell.com the businesses listed in search results should not be marked up using the address tag. If an address tag is to be used on that site it should only be used to mark up Yell.com’s contact details.

However if this contains a Postal address, that’s fine. Or am I way off the mark? :)

Comment by Jonas at

I have been using the address element for a postal address in my imprint. As I understand it, this would be a correct use?

Comment by zcorpan at

In fact, it’s been around since HTML3, remember that?

Actually, it’s been around since the first draft of HTML, HTML Tags.

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

I’d include the “The HTML5 Doctor is run by the following group of volunteers:” text inside the address element.

Shouldn’t the postal address examples include br elements so that it makes sense without CSS? (The spec says br is appropriate for postal addresses.)

Comment by Steve Rose at

Interesting. I had not known that.

However, I’ve used it to indicate addresses of business, etc., and found it to work very well with Google. One little boutique with a common name jumped right to the top of the Google listings, where Google showed a map to the boutique.

Isn’t this a bit like arguing English language usage based on old text books, and ignoring common usage?

Comment by Andrew Vit at

As I understand it, the address element doesn’t limit what kind of contact details it should contain, just that it should be a contact for the page. In any case, postal address should be acceptable!

And, for that matter, why didn’t html5 consider semantic tags for marking up postal addresses and phone numbers? (I mean native elements, not post-facto conventions like hCard.)

Comment by Sarven Capadisli at

This is not an either or situation. Do both.

Postal code in address is totally fine if in fact the owner of the document should be reached using that bit of information. This is plain ol’ HTML.

Mark up the entity (document owner) using hCard because there is that added benefit of identifying specific bits.

Comment by Aaron Bassett at

Even though I agree with Aaron’s approach to how to use <address>, I stopped using it a while back when I began using Microformats instead.

Why not use both? You could easily use <address> as the contain element for your hCard rather than a div. Giving you the benefits of the Microformat & the semantics of using the correct element :)

Comment by Rich Clark at

@aaron, you’re right you could use both.

@zcorpan, yes the <br> tags should be in there.

Jacks now away for a few days at Build Conference so give him a shout if you’re there and he’ll update the article with some of your suggestions just as soon as he gets back.

Thanks

Rich

Comment by Jordan Rothstein at

W3C.org recommends using the Address element for any type of contact information: name, email, IM, phone, postal mail, URL, VOIP and new media as they emerge. Examples of this from the specs for HTML2, HTML3 and HTML4 are given below. (Please note that the address element has been part of HTML since HTML2, not HTML3 as you claimed.)

Address element is for:
Contact information for the contact person(s) for the page.

Address element is not for:
Contact information for anyone other than the contact person(s) for the page.

When to use the Address element:
If I make a page urging readers to contact their elected representative about climate change, my contact info should be in address tags on my page. The representative’s info should not be in address tags on my page. If the elected representative has a page about climate change, their contact info should be in address tags on their page.

Examples from W3C.org:

HTML2
http://www.w3.org/MarkUp/html-spec/html-spec_5.html#SEC5.5.3
The ADDRESS element contains such information as address, signature and authorship, often at the beginning or end of the body of a document.
Typically, the ADDRESS element is rendered in an italic typeface and may be indented.
Example of use:

Newsletter editor
J.R. Brown
JimquickPost News, Jimquick, CT 01234
Tel (123) 456 7890

HTML3
http://www.w3.org/MarkUp/html3/address.html
The ADDRESS element specifies such information as address, signature and authorship for the current document, and typically placed at the top or bottom of the document. When used with %text, the element acts similar to a paragraph with breaks before and after.
Example:

Newsletter editor
J.R. Brown
8723 Buena Vista, Smallville, CT 01234&t;BR>
Tel: +1 (123) 456 7890

HTML3.2
http://www.w3.org/TR/REC-html32#address
The ADDRESS element requires start and end tags, and specifies information such as authorship and contact details for the current document. User agents should render the content with paragraph-breaks before and after. Note that the content is restricted to paragraphs, plain text and text-like elements as defined by the %text entity.
Example:

Newsletter editor
J.R. Brown
8723 Buena Vista, Smallville, CT 01234
Tel: +1 (123) 456 7890

HTML4
http://www.w3.org/TR/WD-html40-970917/struct/global.html#h-8.4.4
For lack of a better place, we include the definition of the ADDRESS here. This element adds author and contact information to a document, e.g.,

Newsletter editor
J. R. Brown
8723 Buena Vista, Smallville, CT 01234
Tel: +1 (123) 456 7890

Comment by Kaelig at

@Jordan :

HTML 4.01 specs :

The ADDRESS element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document.

For example, a page at the W3C Web site related to HTML might include the following contact information:

Dave Raggett,
Arnaud Le Hors,
contact persons for the W3C HTML Activity
$Date: 1999/12/24 23:37:50 $

http://www.w3.org/TR/html401/struct/global.html#edef-ADDRESS

See, there is no mention of a postal address whatsoever in the last specs of the address element.

Comment by Anonymous at

[...] <!– This is bad! –> <address> Dr. Jack Osborne HTML5 Hospital, Doctorville, Great Britain Tel: +44 (0)XXXX XXXXXX </address> Quelle: The Address Element | HTML5 Doctor [...]

Comment by Eli Dupuis at

Thanks for all the clarification and tips!

I’m wondering what you think of the following use of the address element…

I have a list of websites in a portfolio-type setup. Each site has a date, title and a link to the live site—pretty standard setup… Do you think it would be appropriate to wrap the link (perhaps the title as well) in an address tag? Thoughts?

Comment by Jordan Rothstein at

To Eli Dupuis: Don’t use address tags for dates, titles, or links. Use address tags around contact information for the person responsible for a page or a section. Address can include any type of contact information: email, fax, IM, phone, postal mail, and any new ways of contacting people that are developed in the future.

Comment by Jordan Rothstein at

To Eli Dupuis: Clarification – a link to a page about the person responsible for a page or section, could be enclosed in address tags, if the page linked to has contact information for that person, or a form to send them a message.

Comment by Jordan Rothstein at

To Kaelig: The examples showing how to use the address element, on the W3C site, are just examples. Some use physical mail address, some don’t. Some use phone numbers, some don’t. The example you cited doesn’t use phone number, email, or fax. That doesn’t mean that those types of contact information are prohibited. They just were not used in that example.

Comment by Jordan Rothstein at

How this dispute about address started
Recent versions of the HTML Spec contain an unfortunate wording, that has been mis-interpreted by some. Authors are cautioned against arbitrary use of address tags, and a postal address in address tags is an example. That doesn’t mean that postal addresses, or any other type of contact information, are inherently arbitrary. It means that a postal address should only be in address tags, if the postal address is the contact information for the person responsible for the page or section. It’s an example of arbitrary use of address tags. The point is to avoid arbitrary use of address tags, not to avoid postal addresses.

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. (The p element is the appropriate element for marking up postal addresses in general.)
from HTML5 Spec: Address Element

The phrase unless those addresses are in fact the relevant contact information. means if the postal address is the relevant contact information, enclose it in address tags.

e.g. definition: An abbreviation for exempli gratia, Latin for for example.

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <b> <blockquote cite=""> <cite> <del datetime=""> <em> <i> <q cite=""> <strong>

You can also use <code>, and remember to use &lt; and &gt; for brackets.