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">JackOsborne</a>,
<a href="http://html5doctor.com/author/richc">Rich Clark</a>,
<a href="http://html5doctor.com/author/miker">MikeRobinson</a>,
<a href="http://html5doctor.com/author/toml">TomLeadbetter</a>,
<a href="http://html5doctor.com/author/brucel">BruceLawson</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
addresselement 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 microformatsor 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.
0 коммент.:
Отправить комментарий