- Beginner Recipe: How to markup figures and captions using the figure and figcaption elements
- Beginner Recipe: How to markup the date and time using the <time> element
- Beginner Recipe: Make a Native Toggle Widget with the <details> element
- Beginner Recipe: How to Correctly Use the <address> Element
- Beginner Recipe: Highlight Text with the <mark> Element
- Beginner Recipe: Tracking the Completion of a Task with the <progress> Element
- Beginner Recipe: Measuring with the <meter> Element
- Beginner Recipe: How and When to Use the <s> element
- Beginner Recipe: Changes to existing elements
- Recipe: Wrapping links around elements
- Intermediate Recipe: Adding more semantic information with Microdata
- Intermediate Recipe: Using WAI-ARIA with HTML5
- Advanced Recipe: Markup an Article Page with Comments
Beginner Recipe: How to Correctly Use the <address> Element
The specification has this element as a "sectioning" element, like nav or article. However we have put it in this chapter because we think it is more appropriate as a "text-level" semantic as its use concerns text content, rather than layout.
For many years the address element has been used incorrectly by web developers. It is not supposed to be used as a generic postal address (often on a "Contact us" page). So this code is incorrect:
<address> Tom Leadbetter 1 My Street United Kingdom </address>
HTML5 attempts to clear the confusion by intending the address element to be used for contract information for its nearest article or body element.
So, what does that mean? It means that we should use the address element for contact information for the author of the current article, or of the webpage as a whole. Because we can use address inside an article, it means address can potentially be used several times on a site. The content of an address element can be an email address, website, phone number, a postal address, or any other sort of contact information.
Because it is for contact information, it is common to use address within a footer. Listing 2.5 uses the address element two times: one for the author of the main page content and the other for the authors of the whole site.
Listing 2.5
<article> <header> <h1><a href="#">My amazing blog entry</a></h1> <p>12.12.2011</p> </header> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas...</p> <footer> This blog entry was written by <address><a href="me.htm">Tom Leadbetter</a></address> </footer> </article> <footer> This site is owned by <address> <a href="me.htm">Tom Leadbetter</a> and <a href=mailto:him@him.com>Chuck Hudson</a>. </address> </footer>