Marking up a postal address with HTML

The other day I was pondering on how one might go about marking up a postal address (as well as phone and fax numbers etc.) in HTML. There are a number of methods available, some of which I’m going to look at here and give my take on them.

To begin with, let’s define an arbitrary address for testing purposes. Since I’m now living in Germany, let’s take a (largely made up) German address: Karlstraße 120, D-40210 Düsseldorf, Germany, with a phone number of +49 1234 5678 and a fax number (!) of +49 1234 5679.

Also for this article, the above address is to be considered a contact address on a business website, therefore putting the information into a certain type of context.

Definition List

HTML definition lists have been around for a long time, and are convenient for marking up data that has name and corresponding value(s). The HTML elements in question here are: dl, dt and dd.

The suitability of using these elements to mark up our address and contact information depends on the way we want it displayed. There needs to be a name associated with each piece of data in the list. Baring this in mind, the information could be marked up in the following ways:

<dl>
   <dt>Address</dt>
   <dd>Karlstraße 120</dd>
   <dd>D-40210</dd>
   <dd>Düsseldorf</dd>
   <dd>Germany</dd>
   <dt>Tel:</dt>
   <dd>+49 1234 5678</dd>
   <dt>Fax:</dt>
   <dd>+49 1234 5679</dd>   
</dl>

with a number of values being linked to the one entry (“Address”), or

<dl>
   <dt>Street</dt>
   <dd>Karlstraße 120</dd>
   <dt>Postcode</dt>
   <dd>D-40210</dd>
   <dt>City</dt>
   <dd>Düsseldorf</dd>
   <dt>Country</dt>
   <dd>Germany</dd>
   <dt>Tel:</dt>
   <dd>+49 1234 5678</dd>
   <dt>Fax:</dt>
   <dd>+49 1234 5679</dd>
</dl>

with each value being assigned its own entry.

Microdata and PostalAddress

Another way that the postal address could be marked up is via microdata and schema.org’s PostalAddress definition. Microdata allows you to add machine-readable data to your HTML, this giving it a more semantic meaning.

Using the PostalAddress schema, the postal address and contact numbers could be displayed as follows:

<div itemscope itemtype="http://schema.org/ContactPoint">
   <div itemscope itemtype="schema.org/PostalAddress">
      <span itemprop="streetAddress">Karlstraße 120</span>
      <span itemprop="addressLocality">Düsseldorf</span>
      <span itemprop="postalCode">D-40210</span>
      <span itemprop="addressCountry">Germany</span>
   </div>
   <span itemprop="telephone">Tel: +49 1234 5678</span>
   <span itemprop="faxNumber">Fax: +49 1234 5679</span>
</div>

hCard and vCard

hCard is a microformat that can be used to represent people, organisations and places using a representation of the vCard standard properties and values in semantic HTML or XHTML.

As such, it would seem that definding a hCard to mark up our postal address and contact numbers would be ideal. I won’t go into the specific bits and bobs that a hCard definition can contain, as the link above will give you all the information that you need to know. Suffice to say that our address could be marked up in the following way:

<div class="vcard">
   <div class="adr">
      <div class="street-address">Karlstraße 120</div>
      <div class="locality">Düsseldorf</div > 
      <div class="postal-code">D-40210</div >
      <div class="country-name">Germany</div >
   </div>
   <div class="tel">Tel: +49 1234 5678</div>
   <div class="tel">Fax: <span class="fax">+49 1234 5679</span></div>
</div>

The address element

The address element has been around since version 3 of HTML and it continues to exist today. Obviously given its name, it immediately looks like the element to use for our postal address.

However. The section in the W3C HTML5 specification on the address element indicates that the address element shouldn’t be used to mark up any random postal address, unless:

those [postal] addresses are in fact the relevant contact information.

So basically you need to think about the postal address in hand, and its relevance to the content. The address element could (and is more likely to) contain links to contact information for an author of an article for example, which might simply include the author’s name and email address.

Given that our example address and contact numbers given above are contact details for a website, and therefore it could be argued that it’s relevant to the entire website, the address element can, in my opinion, be used here, as it’s not an arbitrary random postal address.

<address>
   Karlstraße 120<br/>
   D-40210 Düsseldorf<br/>
   Germany<br/>
   Tel: +49 1234 5678<br/>
   Fax: +49 1234 5679
</address>

You could also, of course, combine the address element with microdata, adding the machine-readable code to the contact details:

<address class="vcard">
   <div class="adr">
      <div class="street-address">Karlstraße 120</div>
      <div class="locality">Düsseldorf</div > 
      <div class="postal-code">D-40210</div >
      <div class="country-name">Germany</div >
   </div>
   <div class="tel">Tel: +49 1234 5678</div>
   <div class="tel">Fax: <span class="fax">+49 1234 5679</span></div>
</address>

Summary

As you have seen, there are a number of different ways that such postal addresses can be marked up in HTML. To decide on which one is the best for you, you need to think about the context of the contact information and its relevance to the page and site content. In addition, you need to decide what semantic information (if any) you wish to add to the contact details.

It’s your call.

Note: If you notice any errata or have anything extra to add, then by all means please leave a comment below. Discussion teaches us all.