adr-examples: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
(use wiki markup for headings, add numerous warnings and references about use of <address> element)
(removed non-neutral "using address is awkward" comment and added css example to replace the awkward code)
Line 81: Line 81:
</nowiki></pre>
</nowiki></pre>


Note: <code>&lt;address&gt;</code> MUST only contain inline elements which leads to the awkwardness of using code like <nowiki><span class="display:block"></nowiki>. This makes the <code>&lt;address&gt;</code> element awkward to use for many real content situations.
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>

Revision as of 00:24, 2 March 2007

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; }