sintaxis semanticas semantica section secciones etiquetas estructura ejemplos dividir html w3c semantic-markup street-address

semanticas - semantica html5 ejemplos



¿Cuál es la forma más semántica de mostrar una dirección de calle en HTML? (4)

La respuesta de Gumbo le falta el ingrediente vital. Se requiere un hcard / vcard para tener un nombre.

microformats.org/wiki/hcard#Property_List

Además, la etiqueta de dirección no debe utilizarse en este caso, ya que se usa específicamente para relacionarse con el autor de la página en la que se muestra.

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

La mayoría de las empresas que desean mostrar su dirección en su sitio web deben usar lo siguiente:

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

Tengo una dirección que se mostrará en una página web, pero no es la dirección del autor de la página. ¿Cómo debe codificarse esto para ser semántica dada la recomendación w3c de:

El elemento DIRECCIÓN puede ser utilizado por los autores para proporcionar información de contacto para un documento o una parte principal de un documento, como un formulario. Este elemento a menudo aparece al principio o al final de un documento.


Puede usar el elemento PostalAddress del vocabulario de PostalAddress para esto. Se puede usar a través de Microdata , RDFa o JSON-LD .

Por ejemplo, usando 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, esto también debería ser válido con <address> en lugar del <div> adjunto:

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


Puede usar la hCard Microformat para describir su dirección. La ventaja de Microformats es que puede usarlos en sus documentos existentes para enriquecerlos.

Aquí hay un ejemplo derivado del ejemplo de la wiki de Microformats :

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


puede usar RDFa , por ejemplo:

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