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.

Answer 1

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.

Answer 2

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.

Answer 3

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.

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.

Answer 5

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

Answer 6

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.