The Address Element

by .

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.

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.

51 Responses on the article “The Address Element”

Aaron Bassett says

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

Jonas says

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

zcorpan says

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

Steve Rose says

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?

John Faulds says

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.

Andrew Vit says

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

Sarven Capadisli says

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.

Aaron Bassett says

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

Rich Clark says

@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

Bruce Lawson says

Philip – we’d love someone to write a guest column showing how to use microdata. Up for it?

Philip Jägenstedt says

Bruce, maybe I’ll spend this weekend updating my JavaScript implementation to make that possible…

Jordan Rothstein says

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

Nick Edwards says

So would using it around mailto email links be a correct use of this tag? Or is that like the postal address?

Thanks,
Nick

Kaelig says

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

Anonymous says

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

Eli Dupuis says

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?

Jordan Rothstein says

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.

Jordan Rothstein says

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.

Jordan Rothstein says

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.

Jordan Rothstein says

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.

Articles says

Thanks for the codes handy

Ted DRAKE says

It looks like the address is inline. Can it wrap a definition list of contact information on a resume? Or would it be better to use an unordered list and place the address inside each list item, wrapping the the data?

the examples I’ve seen are using spans and such to represent multiple values, not semantic tags.

Conhecendo e usando a tag address | Bernard De Luna says

[...] e sim somente para informações desse tipo do autor da página (contato), como citado no html5doctor : The address element provides contact information for a document or part of a document. [...]

Lijn says

@Philip Jägenstedt Is there an example how to save the information from microdata in all kinds of addressbooks? Or is this ordinairy custom? ; ) It seems to me that microdata needs more scripting then microformats (I’m refer to vcard..)? Or am I making a wrong mix of thoughts? Greetings

Philip Jägenstedt says

Lijn, the situation is similar as with microformats. Microdata/microformats just embed the data, software is always required to get from that to an entry in your address book. I don’t doubt that more tools are available for microformats, but it’s actually slightly easier to parse microdata than microformats, for what it’s worth.

Jason Simone says

I’ve been reading up on this element, but I can’t locate a justification that pleases me regarding the restriction of this element to authorship information. Can someone clue me in?

In earlier specifications, I was always among the camp choosing to take the words “address _may_ include” from the specification more liberally. Admittedly, the new language in the HTML5 spec leave less wiggle room, by explicitly stating the element’s intention: “The address element provides contact information for a document or part of a document.” I do however find the “part of a document” intriguing. Obviously, this could refer to a section of a page with alternate authorship, such as a multiple-author blog or a comment.

However, it seems to make just as just as much semantic sense to me to use to provide contact information for a document _not_ authored by the subject. For example, if I have a page about Stephen King, called Stephen King, how does it make any less sense to use for his contact info? I’ve found very little info about why such a restriction would be beneficial. Perhaps we should think carefully before stating that this approach is definitively “the wrong way”. If that is the W3C intention, however, then I may still exercise discretion in how closely I adhere to it…

Tchalvak says

Aw, and here I was scrolling through to the bottom in hope that the comment in the original article about there being address info in the footer would still be true. But apparently not so much…

BotRot says

All this grey area with, use this tag for this, but not for that, unless that is this…

I wonder what div-ities and span-mania will morph into?

Think we’ll footer in header disease from someone?

What if I want to show a video of an address. is this OK?

<address>
<video></video>
</address>

Semantics, its’ different for everybody… I think!

Mike Edward Moras (e-sushi™) says

Interesting… stating that a postal address should not be marked up with the “address” tag is like expecting people to see without using their eyes.

There is no reason (looking at the specs) why you should not mark up a postal address in there.

You write that “the address element was not created for postal addresses” and try to provide a bit of proof by writing “To reinforce this, the latest spec stipulates that the address element must not be used to represent arbitrary addresses” with a link to the specs.

Did you take the time to read those specs yourself?

They clearly state: “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.)”

So, YES, you can put a postal address in an address tag… as long as you remember that the address tag should be seen like some of the new HTML5 tags (section,article,figure,time,etc.), as the “address” tag enables the classification of a document’s content sections just like those new HTML5 tags. In the end, it’s the thought of tags like “address” that is currently being re-injected into the HTML5 specs.

But hey, these are just my two cents. I’m not going to try to stop you from spreading a bit of misinformation, just because you – as you write – seem to be part of a group of “confused” people and lost in your own interpretation of what you think you see.

See, there is no option for confusion. Read the docs and follow their lead. Don’t try to make it more difficult than it is, just because your brain is used to crack harder nuts. ;)

Paul says

Although it doesnt seem the cleanest way of defining each element of a generic company address.

AJ says

Awesome. Thanks for clearing this up!

Philippe Thomas says

Why do you use the microformat ?

Does the microdata has a bigger semantics value has it is supported by Schema.org ?

:)

Broeiend says

Great article!

Bit confusing tag though, if the element’s not for post addresses, only for a reference to a author’s website address why isn’t it called something like “” or something like that.

TortoiseWrath says

Nope; it’s been around since HTML Tags (1991), which evolved into HTML (1992), then HTML 1.1 and 1.2 (1993). It was nearly deprecated with HTML+, but that project was cancelled in 1993 in favor of HTML 2.0 (1995), which then turned into HTML 3.0 (though that one was never released, and instead was HTML 3.2 in 1997).

leonlecame says

Thanks, no more confusion

Francois says

I was mislead by the example shown on Bootstrap’s documentation:
http://getbootstrap.com/css/#type-addresses

Here is what the wrote in the doc:

<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr>(123) 456-7890
</address>

Andreas Rejbrand says

@Francois: I (strongly) believe that that use of <strong> is semantically incorrect. “Twitter, Inc.” is not something you need to highlight because of its “importance” /in its sentence/. Rather, I think it is something that is to be highlighted simply for utilitarian purposes, so you should use <b> here. Alternatively, if you know that all your site’s <address> blocks start with the person or company name on the first line, you can use the address:first-line CSS selector with font-weight: bold. Of course, you could also use <span> with CLASS attributes on each line, or only the first line, of the block.

Herb Meehan says

Ok, dashes then?

a-d-d-r-e-s-s
One Microsoft Way
Redmond, WA 98052-6399
P:
425.555.0100
a-d-d-r-e-s-s

Jess Carranza says

Great article. Clarified the proper use of “hcard” vs “<address> for me…

Herb Meehan says

Just to clarify, Microsoft uses the address tag to show an address.

Join the discussion.

Some HTML is ok

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.