HTML: semantically mark up an address?

Question

How do I mark up an address (eg a listing of businesses and their addresses)? The problem is that I won't always have enough address information to complete a vCard microformat. The address HTML tag is supposed to be contact information for the author of the page, so probably not the correct tag to use.

Suggestions?

Answer 1

Not entirely sure on what exactly your asking, but if it's from a search engine point of view your worried about give Schema.org a go. There is some great info and example on the local business page to help you markup the address for search engines.

Answer 2

There is currently no designated element for marking up a physical address or postal address. You are correct: <address> should be used only to represent contact information for the article or document author, so you should not use it to mark up the addresses in a listing of businesses for example.

When HTML doesn't exist for certain semantics, your best bet is to mark up the element closest in meaning, and then use auxiliary standards such as (1) Microformat classes, (2) Microdata attributes, and/or (3) ARIA roles. Personally I prefer Microdata over Microformats because Microdata doesn't interfere with the [class] attribute, which is meant for styling. I don't like to mix semantics with style. ARIA roles are for accessibility and I don't know enough about them to say much, but they are very good to have in your code.

Read up on the Microdata syntax (an extension to HTML). Microdata is the official syntax in markup, whereas Schema.org is a very popular (Google loves it) vocabulary to use with the syntax. There are other less-popular vocabularies as well.

To mark up a physical address, use the Schema.org PostalAddress itemtype, with its corresponding properties. Honestly the best element to use would be a plain old <p> .

<p itemscope itemtype="http://schema.org/PostalAddress">
  <span itemprop="name">The White House</span>
  <br/>
  <span itemprop="streetAddress">1600 Pennsylvania Avenue</span>
  <br/>
  <span itemprop="addressLocality">Washington</span>,
  <span itemprop="addressRegion">DC</span>
  <span itemprop="postalCode">20500</span>
  <br/>
  <data itemprop="addressCountry" value="US">United States of America</data>
  <br/>
  <span itemprop="url">https://www.whitehouse.gov/</span>
</p>

The <br/> element is meant to provide (semantic, meaningful) line breaks in content, so its use is justified here in a postal address. It's also an extremely conventional use case. However it can be argued that a <pre> works just as well, as it is technically preformatted text.

<pre itemscope itemtype="http://schema.org/PostalAddress">
  <span itemprop="name">The White House</span>
  <span itemprop="streetAddress">1600 Pennsylvania Avenue</span>
  <span itemprop="addressLocality">Washington</span>, <span itemprop="addressRegion">DC</span> <span itemprop="postalCode">20500</span>
  <data itemprop="addressCountry" value="US">United States of America</data>
  <span itemprop="url">https://www.whitehouse.gov/</span>
</pre>

Answer 3

Well, if it's a list of businesses and their addresses, perhaps you should use a list. There isn't a semantic element for every possible thing you could do in HTML, you just have to use the one that is most relevant. Depending on how you're going to be formatting this information, you should use either a table if the data is in a tabular format, or a list for pretty much any other format.

You can style the list to remove the bullets at the side, but the bottom line is you're still providing a list of data, and that's the most semantic thing you could use.