Вопрос

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

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

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

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

Это было полезно?

Решение

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

http://microformats.org/wiki/adr

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

http://microformats.org/wiki/hcard

Который включает в себя adr.

Другие советы

Как насчет <address> пометка?

Редактировать:

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

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

Элемент АДРЕСА может использоваться авторами для предоставления контактной информации для документа или основной части документа документа, такого как форма.Этот элемент часто появляется в начале или конце документа.

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

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

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

Выглядит как Микроданные является рекомендуемым стандартом на сегодняшний день.

Вот совет от Google о том, как он создает "Расширенные фрагменты" для организаций в результатах поиска: Расширенные фрагменты - Организации.Предлагаемый пример разметки микроданных:

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

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

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

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

<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' или используя идентификатор неупорядоченного списка.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top