Difference between revisions of "adr-examples"

From Microformats Wiki
Jump to navigation Jump to search
(fixed use of "country" to be "country-name")
m (Reverted edits by CboelBotro (Talk) to last version by Csarven)
 
(10 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 
<h1>More ADR examples</h1>
 
<h1>More ADR examples</h1>
  
<h2>LOCALITY and other ADR fragments</h2>
+
== 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 <strong>adr</strong> microformat should not just be limited to full datasets of information.
 
Using the <strong>adr</strong> microformat should not just be limited to full datasets of information.
Line 11: Line 15:
 
Because I marked up the city name with the <em>locality</em> property, I added the <em>adr</em>
 
Because I marked up the city name with the <em>locality</em> property, I added the <em>adr</em>
 
property to the block-level parent element that contains the relevant <em>locality</em> property.
 
property to the block-level parent element that contains the relevant <em>locality</em> property.
 
<h3>Example:</h3>
 
  
 
<pre><nowiki>
 
<pre><nowiki>
Line 19: Line 21:
 
</nowiki></pre>
 
</nowiki></pre>
  
<h2>Use of the <code>&lt;abbr&gt;</code> element</h2>
+
== Use of abbr ==
 +
 
 +
Use of the <code>&lt;abbr&gt;</code> element.
  
 
Semantically-correct <strong>adr</strong> markup would use the <code>&lt;abbr&gt;</code> element while
 
Semantically-correct <strong>adr</strong> markup would use the <code>&lt;abbr&gt;</code> element while
using the <em>region</em>, <em>country-name</em> and perhaps other <strong>adr</strong> properties.
+
using the <em>region</em>, <em>country-name</em> and perhaps other <strong>adr</strong> properties. E.g.:
 +
 
 +
<pre><nowiki>
 +
<span class="adr">
 +
<abbr class="region" title="California">CA</abbr>,
 +
<abbr class="country-name" title="United States">US</abbr>
 +
</span>
 +
</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>&lt;abbr&gt;</code> element when using the <em>country-name</em> property.
 +
 
 +
== Use of the address element ==
 +
 
 +
'''Warning: The <code>&lt;address&gt;</code> element is typically very confusing for web authors and is best avoided.'''
 +
 
 +
The <code>&lt;address&gt;</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>&lt;address&gt;</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>&lt;address&gt;</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 &lt;address&gt;]</code> element with <strong>adr</strong>, '''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>&lt;address&gt;</code> element in general should <strong>not</strong> be used for every instance of <strong>adr</strong>.  
  
<h3>Example:</h3>
+
Example using ADDRESS:
  
 
<pre><nowiki>
 
<pre><nowiki>
<abbr class="region" title="California">CA</a>,
+
<address class="adr">
<abbr class="country-name" title="United States">US</abbr>
+
<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>
 +
</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>
 +
<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>
 +
</nowiki></pre>
 +
 
 +
Note: <code>&lt;address&gt;</code> MUST only contain inline elements which explains the awkwardness of this example's using <nowiki><span class="display:block"></nowiki>. If using <code>&lt;address&gt;</code> for an hCard, consider moving the CSS to an external style sheet such as:
 +
 
 +
<pre><nowiki>
 +
address span.adr { display:block; }
 
</nowiki></pre>
 
</nowiki></pre>
  
For the full country names in the <code>title</code> attribute of the <code>&lt;abbr&gt;</code> element when using the <em>country-name</em> property,
+
== Use of dl element ==
use [http://www.iso.org/iso/en/prods-services/iso3166ma/02iso-3166-code-lists/list-en1.html ISO 3166-1].
+
The information can be paired using the <strong><code>dl</code></strong> element, where <strong><code>dt</code></strong> would contain the human readable label and <strong><code>dd</code></strong> would contain the key and data (except where <strong><code>abbr</code></strong> 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&#233;al</dd>
 +
<dt>Region</dt>
 +
<dd><abbr class="region" title="Qu&#233;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 <strong><code>dt</code></strong> elements can be removed (<code>display:none</code>) from visual presentation.

Latest revision as of 19:19, 3 January 2009

More ADR examples

Use hCard instead where possible

Note: you should always use 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 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.:

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

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

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>
</dl>

Notes:

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