CODEWITHSUNDEEP
htmlmarkupstreet-addressmicrodatamicroformats
JoshBerke
JoshBerke

Reputation: 67068

Html for Snail Mail Addresses

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.

Upvotes: 5

Views: 2427

Answers (7)

Dmitry Pashkevich
Dmitry Pashkevich

Reputation: 13516

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" ...>)

Upvotes: 2

Ms2ger
Ms2ger

Reputation: 15983

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

Upvotes: 3

lexx
lexx

Reputation: 637

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.

Upvotes: -2

John Rasch
John Rasch

Reputation: 63435

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.

Upvotes: 6

skirmish
skirmish

Reputation: 429

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.

Upvotes: 2

singpolyma
singpolyma

Reputation: 11241

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.

Upvotes: 17

Kevin Laity
Kevin Laity

Reputation: 2481

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.

Upvotes: 0

Related Questions