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

我的梦境 提交于 2019-11-30 11:01:03

问题


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.


回答1:


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>



回答2:


The answer by Gumbo is missing the vital 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>



回答3:


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>



回答4:


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>


来源:https://stackoverflow.com/questions/2359440/what-is-the-most-semantic-way-to-display-a-street-address-in-html

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!