A white rectangle marked out on a street

The address tag has been around since HTML 3.2. For developers who were aware of it, the tag has been used as a catch-all element for marking up physical addresses on web pages, often erroneously. HTML5 clarifies and restricts use of the tag to indicating contact information for the author of the document.

Don’t Use <address> For General Postal Addresses in HTML5

If you’re making your personal portfolio website and want to indicate your contact information on the index page, it is entirely appropriate to write something like:

<p>Contact me:
Phone: (403) 457-8778
Mail: <a href="mailto:creator@elysium.com">creator@elysium.com</a>

However, most web developers are not working on their own sites: they are making pages owned by others. In those circumstances, the <address> tag is not appropriate to use for company contact information, as the company itself is not the author of the document.

Obviously, you still need to put the company’s address on the page, while ensuring that can understand the physical location of the business when they scan the markup. So what do you use?

There are two primary methods for making physical address information clear on a page: microformats and microdata. Microdata is newer, and still building support: thankfully, the two standards are not incompatible, and both can be used on a page simultaneously. To keep things simple, we’ll start with microformats.

Mark Up Street Addresses With Microformats

Microformats uses a system of predefined classes to indicate information. It’s important to understand that these classes do not relate to the CSS used in your stylesheet (although there’s nothing to say that you can’t add hooks to format them for your pages). An example would be the microformat-enhanced address of SAIT Polytechnic, where I currently work and teach:

<div class="vcard">
	<abbr class="fn org" title="Southern Alberta Institute of Technology">SAIT Polytechnic</abbr>
	<p class="adr">
		<span class="street-address">1301 16 Avenue NW</span>
		<span class="locality">Calgary</span>
		<abbr class="region" title="Alberta">AB</abbr>
		<span class="country-name">Canada</span>
		<span class="postal-code">T2M 0L4</span>
	<p>Phone:<a class="tel" href="tel:+14032847248">(403)284-7248</a>

Note that the microformat schema employs the trick of using multiple classes to define information that falls under two or more categories: fn (for full name) is required in the vcard format, and should be the name of the company if the address is not intended to represent a particular individual. SAIT is also an organisation (a generic term that includes businesses) so that class is used also. The adr class contains the actual address. Microformat classes can be attached to any tag that encloses relevant information: using span, div and p is common, but others are equally applicable.

I would typically link the address to the physical location of the company on Google Maps for easy access, or embed a map on the page, as I have done at the top of this article. I’ve also linked the telephone number to enable the site visitor to click-to-call, as I explained in a previous article.

Because both <span> and <abbr> are displayed inline, you’ll usually want to adjust your CSS to change the appearance of the address:

.adr span, .vcard abbr {
	display: block;

You can test how Google will see this information using the Rich Snippets Testing Tool. You can also create correct microdata markup for a company by using the hcard creator.

List The Business With Search Engines

Much like registering your site with search engines, you can also list a company’s address and other identifying information directly with the major search companies. Start by registering your business with Google Places for Business, the Bing Business Portal, and Yahoo Local Listings. All of these services are free, and include the opportunity to add information such as hours of operation, phone numbers, and photographs.


In conclusion:

  • Don’t use <address> in an HTML5 document unless you are both the creator and subject of the page.
  • Markup address information with microformats: you can read more about the hcard and adr formats at the microformats wiki.
  • Make a vcard file available for people to add to their address books.
  • Register the business, including its physical address, with major search engines (and remember to keep the information updated).

Photograph by Joost Markerink, used under a Creative Commons 2.0 Generic license

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