Html for Snail Mail Addresses

Question

What do you think is the best way to markup a snail mail address? I found some different options such as:

<div class="address">
<span class="name">Mr. Bob</span><br/>
<span class="street">45654 Bob Ln</span><br/>
<span class="city">Imaginery</span>,<span class="state">OH</span><br/>
<span class="postalCode">44321</span>
</div>

I also saw the previous example using an address tag instead of a div. Another option I found was:

<div class="address">
  <p>Mr. Bob</p>
  <p>45654 Bob Ln</p>
  <p>Imaginery, OH</p>
  <p>44321</p>
</div> 

So my question is what do you think is the best markup to express a snail mail address? And do not limit yourself to my examples.

I feel the first one is the best option, as it provides additional context about each element. I also feel the br is part of the content in this case.

Injection

Answer 1

Use the adr microformat:

http://microformats.org/wiki/adr

If you also want to mark up the persons name use hCard:

http://microformats.org/wiki/hcard

Which includes adr.

Goddart

I had looked at Microformats a while back, but couldn't remember the name, was hoping to get an answer for this one. This same question can be expanded to all contact information. – Injection

You happen to know if outlook or other client apps can detect hcards and import their data into contacts? I'm thinking smart tag type behavior. – Injection

My site is specific to IE right now, and a private site so neither will work; however, its cool to see technology moving towards it. – Injection

Why will technorati.com/contacts not work? It's just a web link, and I've definitely seen it used in IE. – Goddart

Oh, a private site, sorry, yeah, need a plugin then, and I'm not sure there's one for IE. – Goddart

No problem, having my customers download a plugin anyways isn't always that easy...this would just be one of those thing that would make my boss's eyes light up and help him justify why he keeps paying me;-) – Injection

Answer 2

How about the <address> tag?

Edit:

It appears the commentors are correct, this tag is generally used to represent contact information from the authors of a page or form.

From the HTML 4.1 Specification...

The ADDRESS element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document.

So, if it's your address you're displaying, use this. Otherwise, use what singpolyma suggested.

Hercules

the address tag is for contact information for the page owner – Goddart

From the page you linked to: "The <address> tag is used to mark up contact information for the author or owner of the document. This way, the reader is able to contact the document's owner." – Goddart

Answer 3

Using <br>s is definitely more correct than <p>s; for the class names I follow singpolyma.

Rossie

I totally agree with this on the br's. I hate how p's render by default, not to mention they aren't paragraphs. – Injection

Answer 4

The first is example is using http://microformats.org/wiki/adr which would be ideal, as it's a fairly well accepted standard for indexing.

Herwick

Answer 5

Looks like Microdata is the recommended standard of today.

Here's a tip from Google on the way it creates "Rich Snippets" for organizations in search results: Rich snippets - Organizations. Suggested Microdata markup example:

<div itemscope itemtype="http://data-vocabulary.org/Organization"> 
    <span itemprop="name">L’Amourita Pizza</span>
    Located at 
    <span itemprop="address" itemscope 
      itemtype="http://data-vocabulary.org/Address">
      <span itemprop="street-address">123 Main St</span>, 
      <span itemprop="locality">Albuquerque</span>, 
      <span itemprop="region">NM</span>.
    </span>
    Phone: <span itemprop="tel">206-555-1234</span>.
    <a href="http://www.example.com" itemprop="url">http://pizza.example.com</a>.
</div>

Additionally, I would use the <address> HTML element as a container for address details instead of just a generic <span> (i.e. <address itemprop="address" ...> vs <span itemprop="address" ...>)

Plumate

Answer 6

It sounds like you're looking for something for an automated system to be able to pick up the data. And I agree that the first solution is much better. It ensures that there's meaning assigned to the data. Also it ensures that you can add fields you didn't think of later, such as address line 2.

Arginine

Answer 7

Personally I would use an unordered list:

<ul id="sender_address" class="address">
    <li class="address_as">Mr. Bob Smith</li>
    <li class="street">67 Some Street</li>
    <li class="post_town">Foo City"</li>
    <li class="postcode">X11 1XX</li>
</ul>

This would limit inheriting any unwated styles from the more comonly used tags that you have used in your example. As for having to give a class to each line of the address that would be optional depending on the markups use. You could simply style the whole address using the 'address' class or using the id of the unordered list.

Sericeous

An address is made up of a number of lines, but it isn't a list. Lists are overused, they shouldn't be the first port of call whenever you have things that should be on separate lines. – Grassplot

Quentin is right. Don't use a ul for an address. Otherwise you could consider a sentence like "My name is John" to be a ul consisting of the li elements "My", "name", "is" and "John". – Maypole