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

Question

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.

@Franz: Microformats are using classes for their description. And that’s absolutely legitimate. — Gumbo, Mar 01 '10 at 22:11
Could you semantically display a microformated address inside the address tag? — Ally, Mar 01 '10 at 22:11
I know. But they are not "developed" by the W3C, right? Then again, the question doesn't really say that's necessary. Misread that... — Franz, Mar 01 '10 at 22:13
@Gumbo I am not too familiar with Microformats, but wouldn't mind an example. I am more curious to how this would be done with basic html. — tomk, Mar 01 '10 at 22:13
While I personally like microformats, though use them sparingly, it's worth pointing out that Jeff Atwood, among others, has a potentially contrary viewpoint: http://www.codinghorror.com/blog/2009/12/microformats-boon-or-bane.html — David says reinstate Monica, Mar 01 '10 at 22:25
http://www.cs.tut.fi/~jkorpela/html/address.html That site has a good breakdown of how to -style- street addresses, and how to deal with the html itself (independent of hCard). — Kzqai, Jul 29 '12 at 16:51

score 22 · Accepted Answer · answered Mar 01 '10 at 22:15

22

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>

answered Mar 01 '10 at 22:15

Gumbo

594,236
102
740
814

2

Thanks for pointing out that divs are not allowed inside the address tag :) – Ally Mar 01 '10 at 22:25
25

Given that the question asks "it is not the address for the author of the page", one should not use the HTML address element this address. The address element may only be used for the contact information of the author of a page or article. Here, the address element should be a div, although p would be acceptable too. The HTML5 draft is more specific regarding this: http://dev.w3.org/html5/spec/sections.html#the-address-element – Stephen Booher Nov 16 '11 at 15:47
8

This answer is misleading because as @StephenBooher points out, the address element should not be used for general purpose addresses. – User Oct 22 '12 at 01:46
An hcard/vcard is required to have a name http://microformats.org/wiki/hcard#Property_List – Tristanisginger Apr 21 '15 at 10:26
1

Spec explaining correct semantic usage (as @StephenBooher link is dead) - https://www.w3.org/wiki/HTML/Elements/address – zumek Oct 21 '15 at 01:31
@Ally divs are allowed within an address tag. See the permitted content section here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address – VKK Jan 18 '16 at 19:36

Tristanisginger · Answer 2 · 2020-10-15T09:47:23.640

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>

score 4 · Answer 3 · answered Mar 01 '10 at 22:18

you can use RDFa, eg:

<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:foaf="http://xmlns.com/foaf/0.1/"
    xmlns:address="http://schemas.talis.com/2005/address/schema#"
    xml:lang="fr" lang="fr"
>
 <head>...</head>
 <body>
  <div typeof="foaf:Person" about="http://you.openid.com#me">
   <span id="name" property="foaf:name">First Name, Last Name</span>
   <address property="address:streetAddress">My Street, My City</address>
  </div>
 </body>
</html>

score 1 · Answer 4 · answered Jul 04 '17 at 17:25

You can use the Schema.org vocabulary's PostalAddress item for this. It can be used via Microdata, RDFa, or JSON-LD.

For example, using RDFa:

<div vocab="http://schema.org/" typeof="PostalAddress">
 <span property="name">Google Inc.</span>
 P.O. Box<span property="postOfficeBoxNumber">1234</span>
 <span property="addressLocality">Mountain View</span>,
 <span property="addressRegion">CA</span>
 <span property="postalCode">94043</span>
 <span property="addressCountry">United States</span>
</div>

AFAIK, this should also be valid with <address> in place of the enclosing <div>:

<address vocab="http://schema.org/" typeof="PostalAddress">
 <span property="name">Google Inc.</span>
 P.O. Box<span property="postOfficeBoxNumber">1234</span>
 <span property="addressLocality">Mountain View</span>,
 <span property="addressRegion">CA</span>
 <span property="postalCode">94043</span>
 <span property="addressCountry">United States</span>
</address>

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

4 Answers4

Linked