demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Marking Your Territory: Using Address Microformats With Search Engines

seo / microformats

Estimated reading time: 3 minutes, 18 seconds

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:
<address>
Phone: (403) 457-8778
Mail: <a href="mailto:creator@elysium.com">creator@elysium.com</a>
</address>

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 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>
</div>

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 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.

Summary

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).
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.