adr-examples

2009-01-03T12:00:22Z

CboelBotro: alallivi

bocolor
<h1>More ADR examples</h1>

== Use hCard instead where possible ==

'''Note: you should always use [[hcard|hCard]] instead of [[adr]] where possible. If you are marking up an address that is associated with a named person or place, then mark up that named person or place ''with'' that address as an [[hcard|hCard]] with "adr" property and subproperties. See [[hcard-authoring|hCard authoring]], and [[hcard-examples|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.

<pre><nowiki>
Unbelievable. Yesterday's high temperature in Salem it was 57 degrees out. 
</nowiki></pre>

== Use of abbr ==

Use of the <code><abbr></code> element.

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

<pre><nowiki>

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

</nowiki></pre>

Use [http://www.iso.org/iso/en/prods-services/iso3166ma/02iso-3166-code-lists/list-en1.html ISO 3166-1] for the full country names in the <code>title</code> attribute of the <code><abbr></code> element when using the country-name property.

== Use of the address element ==

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

The <code><address></code> element does NOT mean what you might think it means (unless you are one of the few folks who has thoroughly read the [http://w3.org/tr/html401 HTML 4.01 recommendation]).

The <code><address></code> element '''does NOT mean "address"'''.

Please read the [[hcard-faq|hCard FAQ]] ''first'' before even considering this, especially the [[hcard-faq#Should_I_use_ADDRESS_for_hCards||section on the <code><address></code> element]].

If you have read all that first, note that it is possible in some rare situations to use the HTML <code>[http://www.w3.org/MarkUp/html3/address.html <address>]</code> 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|hCard]] instead, as illustrated in [[hcard-examples#Authors_of_Pages_and_Posts||hCard Examples: Authors of Pages and Posts]].

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

Example using ADDRESS:

<pre><nowiki>
<address class="adr">
665 3rd St.
Suite 207
San Francisco,
CA
94107
United States
</address>
</nowiki></pre>

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

<pre><nowiki>
<address class="vcard">
<a class="url fn org" href="http://technorati.com/">Technorati</a>

665 3rd St.
Suite 207

San Francisco,
CA
94107

United States

</address>
</nowiki></pre>

Note: <code><address></code> MUST only contain inline elements which explains the awkwardness of this example's using <nowiki></nowiki>. If using <code><address></code> for an hCard, consider moving the CSS to an external style sheet such as:

<pre><nowiki>
address span.adr { display:block; }
</nowiki></pre>

== Use of dl element ==
The information can be paired using the <code>dl</code> element, where <code>dt</code> would contain the human readable label and <code>dd</code> would contain the key and data (except where <code>abbr</code> is appropriate for the key). Example:
<pre>
<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>
</dl>
</pre>

Notes:
* The human readable labels in <code>dt</code> elements can be removed (<code>display:none</code>) from visual presentation.

Microformats Wiki - User contributions [en]

adr-examples