Question

Que pensez-vous est la meilleure façon de baliser une adresse de courrier postal? J'ai trouvé quelques options différentes telles que:

<div class="address">
<span class="name">Mr. Bob</span><br/>
<span class="street">45654 Bob Ln</span><br/>
<span class="city">Imaginery</span>,<span class="state">OH</span><br/>
<span class="postalCode">44321</span>
</div>

J'ai vu aussi l'exemple précédent en utilisant une étiquette d'adresse au lieu d'un div. Une autre option que j'ai trouvé:

<div class="address">
  <p>Mr. Bob</p>
  <p>45654 Bob Ln</p>
  <p>Imaginery, OH</p>
  <p>44321</p>
</div> 

Alors, ma question est ce que pensez-vous est le meilleur balisage pour exprimer une adresse mail escargot? Et ne vous limitez pas à mes exemples.

Je me sens le premier est la meilleure option, car il fournit un contexte supplémentaire sur chaque élément. Je me sens aussi large est une partie du contenu dans ce cas.

Était-ce utile?

La solution

Utilisez le microformat adr:

http://microformats.org/wiki/adr

Si vous voulez également marquer le nom de personnes utilisation hCard:

http://microformats.org/wiki/hcard

Ce qui comprend adr.

Autres conseils

Comment la balise <address> ?

Modifier

Il semble que les commentors sont corrects, cette balise est généralement utilisé pour représenter les informations de contact des auteurs d'une page ou un formulaire.

De la HTML 4.1 Spécification .. .

  

L'élément d'adresse peut être utilisée par   auteurs de fournir des informations de contact   pour un document ou d'une partie importante d'un   document comme une forme. cet élément   apparaît souvent au début ou à la fin   d'un document.

Alors, si elle est votre adresse que vous affichiez, utilisez ce. Dans le cas contraire, utilisez ce singpolyma suggéré.

Utilisation <br>s est certainement plus correct que <p>s; pour les noms de classe je suis singpolyma.

Le premier est par exemple est d'utiliser http://microformats.org/wiki/adr qui serait idéal, car il est une norme assez bien acceptée pour l'indexation.

On dirait microdonnées est la norme recommandée d'aujourd'hui.

Voici une astuce de Google sur la façon dont il crée pour les organisations « Rich Snippets » dans les résultats de recherche: extraits riches - organisations . exemple de balisage microdonnées suggéré:

<div itemscope itemtype="http://data-vocabulary.org/Organization"> 
    <span itemprop="name">L’Amourita Pizza</span>
    Located at 
    <span itemprop="address" itemscope 
      itemtype="http://data-vocabulary.org/Address">
      <span itemprop="street-address">123 Main St</span>, 
      <span itemprop="locality">Albuquerque</span>, 
      <span itemprop="region">NM</span>.
    </span>
    Phone: <span itemprop="tel">206-555-1234</span>.
    <a href="http://www.example.com" itemprop="url">http://pizza.example.com</a>.
</div>

En outre, j'utiliser le <address> élément HTML comme un conteneur pour les détails d'adresse au lieu de juste un <span> générique (c.-à-<address itemprop="address" ...> vs <span itemprop="address" ...>)

On dirait que vous cherchez quelque chose pour un système automatisé pour pouvoir récupérer les données. Et je suis d'accord que la première solution est beaucoup mieux. Il assure qu'il ya sens aux données. il assure également que vous pouvez ajouter des champs que vous ne pensez pas à plus tard, comme la ligne d'adresse 2.

Personnellement, j'utiliser une liste non ordonnée:

<ul id="sender_address" class="address">
    <li class="address_as">Mr. Bob Smith</li>
    <li class="street">67 Some Street</li>
    <li class="post_town">Foo City"</li>
    <li class="postcode">X11 1XX</li>
</ul>

Cela limiterait héritant tous les styles unwated des balises plus comonly utilisé que vous avez utilisé dans votre exemple. Quant à avoir à donner une classe à chaque ligne de l'adresse qui serait facultative en fonction de l'utilisation de marges bénéficiaires. Vous pouvez simplement le style de l'adresse complète en utilisant la classe « adresse » ou en utilisant l'identifiant de la liste non ordonnée.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top