A roadside sign for a gas station against a bright blue sky

When they are aware of it, developers often use the <address> tag to surround contact information for a business or individual on their site. Until very recently, this was technically incorrect: the <address> element was intended to markup the contact information for the person responsible for the site.

Yesterday Steve Faulkner made me aware that the W3C had changed the HTML 5.2 specification to reflect the common interpretation of the element, much to their credit. However, there are a few things to know about the element in order to use it effectively:

Essential Addresses

The basic use of the <address> element is as follows:

<address>
15 Central Park West,<br>
New York, NY 10023,<br>
USA
</address>

While the <address> element makes the text readable by both humans and the browser, it won’t always be clear to Google what kind of address you’re using: is it the business’s physical address, or does it describe something else? What part of the address is the street information, and which part the state or region?

In some cases, a search engine might be able to guess the correct information from the web page, but I’d also take two extra steps to clarify it:

  1. If you’re talking about a business with a physical address, register it in Google My Business.
  2. For businesses and all other locations, use a combination of microdata and a tel link to add to the markup:
<div vocab="http://schema.org/" typeof="LocalBusiness">
    <img property="image" src="http://www.mokuhawaii.com/shack.jpg"/>
    <span property="name">Moku Hawaii Surf Shop and Surf Board Rentals</span>
    <address property="address" typeof="PostalAddress">
        <span property="streetAddress">2446 Koa Ave,</span>
        <span property="addressLocality">Honolulu</span>, 
        <span property="addressRegion">HI</span>
        <span property="postalCode">96815</span>, 
        <span property="addressCountry">USA</span>
    </address>
    <a href="tel:+18089266658" property="telephone">+1 808-926-6658</a>
</div>

Adding the markup also makes the presentation of the content easier with CSS: no need for <br> tags!

Conclusion

The new specification definition of the <address> element aligns it with everyday use, but to make the most out of it, further markup should be added around the address data.

Photograph by Wayne Stadler, used under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.