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.
52 Responses on the article “The Address Element”
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:
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? :)
I have been using the address element for a postal address in my imprint. As I understand it, this would be a correct use?
Actually, it’s been around since the first draft of HTML, HTML Tags.
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.)
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?
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.
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.)
This is not an either or situation. Do both.
Postal code in
addressis 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.
[…] This post was mentioned on Twitter by Simon Bingham, ilya alexander , Jack Osborne, Rafael de Almeida, Mike Robinson and others. Mike Robinson said: Dr @jackosborne takes a look at <address> http://bit.ly/2Fo7OR Maybe time for a @html5doctor house call service? #html5 […]
[…] The Address Element | HTML5 Doctor […]
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 :)
@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.
No love for HTML5 microdata?
Philip – we’d love someone to write a guest column showing how to use microdata. Up for it?
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:
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:
JimquickPost News, Jimquick, CT 01234
Tel (123) 456 7890
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.
8723 Buena Vista, Smallville, CT 01234&t;BR>
Tel: +1 (123) 456 7890
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.
8723 Buena Vista, Smallville, CT 01234
Tel: +1 (123) 456 7890
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.,
J. R. Brown
8723 Buena Vista, Smallville, CT 01234
Tel: +1 (123) 456 7890
So would using it around mailto email links be a correct use of this tag? Or is that like the postal address?
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:
Arnaud Le Hors,
contact persons for the W3C HTML Activity
$Date: 1999/12/24 23:37:50 $
See, there is no mention of a postal address whatsoever in the last specs of the address element.
Thanks for all the clarification and tips!
I’m wondering what you think of the following use of the
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
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.
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.
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.
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 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 . 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.
from HTML5 Spec: Address Element
The phrasemeans if the postal address is the relevant contact information, enclose it in address tags.
definition: An abbreviation for Latin for
[…] The Address Element | HTML5 Doctor – The right way to use the <address> element in html mark-up</address> […]
Thanks for the codes handy
[…] http://html5doctor.com/the-address-element/ […]
[…] If you reaaally want to see how confused people are just on the address tag, go read and start laughing at the comments on this article. […]
[…] 출처 : http://html5doctor.com/the-address-element/ […]
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.
[…] 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. […]
@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
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.
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…
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…
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?
Semantics, its’ different for everybody… I think!
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. ;)
After reading all the replies and associated markup, W3schools cleared it up for me. http://www.w3schools.com/html5/tag_address.asp
Although it doesnt seem the cleanest way of defining each element of a generic company address.
Ok. Theres more. Ive gone in a loop. Microdata – hCard maybe a more defined way (kindof). Yes Doctor you are the Doctor and after much refinement I think your right :)
The following sold me:
http://html5doctor.com/microformats/#hcard (example in this post also)
Look forward to feedback ^-^
Awesome. Thanks for clearing this up!
Why do you use the microformat ?
Does the microdata has a bigger semantics value has it is supported by Schema.org ?
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.
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).
Thanks, no more confusion
I was mislead by the example shown on Bootstrap’s documentation:
Here is what the wrote in the doc:
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr>(123) 456-7890
@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-lineCSS 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.
Ok, dashes then?
One Microsoft Way
Redmond, WA 98052-6399
Great article. Clarified the proper use of “hcard” vs “<address> for me…
Just to clarify, Microsoft uses the address tag to show an address.
My solution use both hCard microformat AND HTML5 Address Tags. This is tricky. I wrote a post on it awhile ago and would be interested in your comments on how relevant it still is: http://pageladder.com/using-hcard-microformat-with-html5-address-tags-for-local-search-optimization/
I really wish you guys would rewrite this article slightly to clarify that postal address in the address element is just fine for self-contact-info! As written it echos the un-intuitive language (which the spec uses as well, to be fair) that implies that postal address is bad!
Essentially the “this is bad” postal address example lends itself to confusion, because postal addresses aren’t inherently forbidden, the language should clarify something like “This isn’t always ok! Only postal addresses for the site contact info or for the article contact info should get into address.”
Does the address element is correct for a list of social links, should they concern the author of the website ?
Leave a Reply to Aaron Bassett