adr-examples

More ADR examples

Use hCard instead where possible

Note: you should always use hCard instead of adr where possible. If you are marking up and address that is associated with a named person or place, then mark up that named person or place with that address as an hCard with "adr" property and subproperties. See hCard authoring, and hCard examples for more on this.

LOCALITY and other ADR fragments

Using the adr microformat should not just be limited to full datasets of information. In some cases, people reference regions or localities sans any additional information.

By marking these cases up, use of microformats, (particularly adr), will skyrocket.

For instance - with the below post, we reference a city but nothing else. Because I marked up the city name with the locality property, I added the adr property to the block-level parent element that contains the relevant locality property.

<p class="adr">Unbelievable. Yesterday's high temperature in <span  
class="locality">Salem</span> it was 57 degrees out. </p>

Use of abbr

Use of the <abbr> element.

Semantically-correct adr markup would use the <abbr> element while using the region, country-name and perhaps other adr properties. E.g.:

<abbr class="region" title="California">CA</abbr>,
<abbr class="country-name" title="United States">US</abbr>

For the full country names in the title attribute of the <abbr> element when using the country-name property, use ISO 3166-1.

Use of the address element

Warning: The <address> element is typically very confusing for web authors and is best avoided.

The <address> element does NOT mean what you might think it means (unless you are one of the few folks who has thoroughly read the HTML 4.01 recommendation).

The <address> element does NOT mean "address".

Please read the hCard FAQ first before even considering this, especially the |section on the <address> element.

If you have read all that first, note that it is possible in some rare situations to use the HTML <address> element with adr, IF the information specifies a contact address for the current document, such as site contact or business address, though even in most of those cases, you should be using hCard instead, as illustrated in |hCard Examples: Authors of Pages and Posts.

The <address> element in general should not be used for every instance of adr.

Example using ADDRESS:

<address class="adr">
 <span class="street-address">665 3rd St.</span>
 <span class="extended-address">Suite 207</span>
 <span class="locality">San Francisco</span>,
 <span class="region">CA</span>
 <span class="postal-code">94107</span>
 <span class="country-name">United States</span>
</address>

But even this example is better marked up as an hCard, since that is the address of a specific organization:

<address class="vcard">
 <a class="url fn org" href="http://technorati.com/">Technorati</a>
 <span class="adr" style="display:block">
  <span class="street-address">665 3rd St.</span>
  <span class="extended-address">Suite 207</span>
  <span style="display:block">
   <span class="locality">San Francisco</span>,
   <span class="region">CA</span>
   <span class="postal-code">94107</span>
  </span>
  <span class="country-name">United States</span>
 </span>
</address>

Note: <address> MUST only contain inline elements which explains the awkwardness of this example's using <span class="display:block">. If using <address> for an hCard, consider moving the CSS to an external style sheet such as:

address span.adr { display:block; }

Use of dl element

The information can be paired using the dl element, where dt would contain the human readable label and dd would contain the key and data (except where abbr is appropriate for the key). Example:

<dl class="adr">
	<dt>Street Address</dt>
	<dd class="street-address">1100 Boulevard René-Lévesque Ouest</dd>
	<dt>Extended Address</dt>
	<dd class="extended-address">24th Floor</dd>
	<dt>Postal Code</dt>
	<dd class="postal-code">H3B 4X9</dd> 
	<dt>Locality</dt>
	<dd class="locality">Montréal</dd>
	<dt>Region</dt>
	<dd><abbr class="region" title="Québec">QC</abbr></dd>
	<dt>Country</dt>
	<dd><abbr class="country-name" title="Canada">CA</abbr></dd>
	<dt>Geo</dt>
	<dd class="geo">
		<dl>
			<dt>Latitude</dt>
			<dd><abbr class="latitude" title="45.498677">45°34' 13" N</abbr></dd>
			<dt>Longitude</dt>
			<dd><abbr class="longitude" title="-73.570260">73°29' 55" W</abbr></dd>
		</dl>
	</dd>
</dl>

Notes:

• The human readable labels in dt elements can be removed (display:none) from visual presentation.
• See also geo-brainstorming