HTML для почтовых адресов улиток - PullRequest
Новая
       28

HTML для почтовых адресов улиток

5 голосов
/ 08 апреля 2009

Какой, по вашему мнению, лучший способ разметить почтовый адрес улитки? Я нашел несколько разных вариантов, таких как: 

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

Я также видел предыдущий пример с использованием адресного тега вместо div. Другой вариант, который я нашел, был: 

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

Итак, мой вопрос: что, по вашему мнению, является лучшей разметкой для выражения адреса почты улитки? И не ограничивайтесь моими примерами.

Мне кажется, что первый вариант - лучший, поскольку он предоставляет дополнительный контекст о каждом элементе. Я также чувствую, что в данном случае это часть контента.

Ответы [ 7 ]

17 голосов
/ 08 апреля 2009

Используйте микроформат adr:

http://microformats.org/wiki/adr

Если вы также хотите отметить имя человека, используйте hCard:

http://microformats.org/wiki/hcard

Включая адр.

6 голосов
/ 08 апреля 2009

Как насчет тега <address>?

Edit:

Похоже, что комментаторы верны, этот тег обычно используется для представления контактной информации от авторов страницы или формы.

Из спецификации HTML 4.1 ...

Элемент ADDRESS может использоваться авторы предоставить контактную информацию для документа или основной части документ, такой как форма. Этот элемент часто появляется в начале или в конце документа.

Итак, если это ваш адрес, который вы отображаете, используйте это. В противном случае используйте то, что предложено singpolyma .

3 голосов
/ 09 апреля 2009

Использование <br> s определенно более правильно, чем <p> s; для названий классов я следую за сингполимой.

2 голосов
/ 02 мая 2013

Похоже, Микроданные является рекомендуемым стандартом сегодня.

Вот совет от Google о том, как он создает «Rich Snippets» для организаций в результатах поиска: Rich snippets - Organizations . Пример предлагаемой разметки микроданных: 

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

Кроме того, я бы использовал HTML-элемент <address> в качестве контейнера для деталей адреса, а не просто общий <span> (т.е. <address itemprop="address" ...> против <span itemprop="address" ...>)

2 голосов
/ 08 апреля 2009

В первом примере используется http://microformats.org/wiki/adr, что было бы идеально, так как это довольно хорошо принятый стандарт для индексации.

0 голосов
/ 09 апреля 2009

Лично я бы использовал неупорядоченный список: 

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

Это ограничит наследование любых ненатейлированных стилей от более часто используемых тегов, которые вы использовали в своем примере. Что касается необходимости присваивать класс каждой строке адреса, который будет необязательным в зависимости от использования разметки. Вы можете просто стилизовать весь адрес, используя класс address или идентификатор неупорядоченного списка.

0 голосов
/ 08 апреля 2009

Похоже, вы ищете что-то для автоматизированной системы, чтобы иметь возможность собирать данные. И я согласен, что первое решение намного лучше. Это гарантирует, что есть значение, присвоенное данным. Также это гарантирует, что вы можете добавить поля, о которых вы не задумывались позже, например, адресную строку 2.

...