Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the most semantic way to display a street address in HTML?

I have an address that is going to be displayed on a webpage, but it is not the address for the author of the page. How should this be coded to be semantic given the w3c recommendation of:

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.

like image 370
tomk Avatar asked Mar 01 '10 22:03

tomk


People also ask

How do you display address in HTML?

If <address> tag is used inside the <body> tag then it represents the contact information of the document and if the <address> tag is used inside the <article> tag, then it represents the contact information of the article. The text inside the <address> tag will display in italic format.

What is a semantic use of the address element?

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.

What tag is used for address in HTML?

The <address> tag defines the contact information for the author/owner of a document or an article. The contact information can be an email address, URL, physical address, phone number, social media handle, etc.


2 Answers

You could use the hCard Microformat to describe your address. The advantage of Microformats is that you can use them in your existing documents to enrich them.

Here’s an example derived from the example from the Microformats wiki:

<address class="vcard">   <span class="adr">     <span class="street-address">169 University Avenue</span>     <span class="locality">Palo Alto</span>,       <abbr class="region" title="California">CA</abbr>&nbsp;&nbsp;     <span class="postal-code">94301</span>     <span class="country-name">USA</span>   </span> </address> 
like image 136
Gumbo Avatar answered Sep 22 '22 21:09

Gumbo


The answer by Gumbo is missing an ingredient. An hcard/vcard is required to have a name.

http://microformats.org/wiki/hcard#Property_List

Also the address tag should not be used in this case as it is specifically used to relate to the author of the page it is displayed on.

<div class="vcard">   <span class="fn">Tristan Ginger</span>   <span class="adr">     <span class="street-address">169 University Avenue</span>     <span class="locality">Palo Alto</span>,       <abbr class="region" title="California">CA</abbr>     <span class="postal-code">94301</span>     <span class="country-name">USA</span>   </span> </div> 

Most business wanting to display their address on their website should use the following:

<address class="vcard">   <span class="fn org">Tristan Ginger Inc</span>   <span class="adr">     <span class="street-address">69 University Avenue</span>     <span class="locality">Great Bookham</span>,       <span class="region">Surrey</span>     <span class="postal-code">KT22 9TQ</span>     <span class="country-name">UK</span>   </span> </address> 
like image 42
Tristanisginger Avatar answered Sep 23 '22 21:09

Tristanisginger