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.
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:
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:
with a number of values being linked to the one entry (“Address”), or
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:
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:
The address element
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.
You could also, of course, combine the
address element with microdata, adding the machine-readable code to the contact details:
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.