HTML: семантически разметить адрес?

Как разметить адрес (например, список компаний и их адреса)? Проблема в том, что у меня не всегда будет достаточно адресной информации для завершения микроформата vCard. HTML-тег address должен быть контактной информацией автора страницы, поэтому, вероятно, это неправильный тег для использования.

Предложения?


person StackOverflowNewbie    schedule 10.12.2011    source источник


Ответы (3)


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

Вы можете изменить стиль списка, чтобы удалить маркеры сбоку, но суть в том, что вы по-прежнему предоставляете список данных, и это наиболее семантическая вещь, которую вы можете использовать.

person animuson    schedule 10.12.2011
comment
Каждый бизнес будет элементом списка. Я хочу знать, как разметить только адресную часть (есть и другие сведения о бизнесе, которые мне нужно предоставить пользователю, а не только адрес). - person StackOverflowNewbie; 10.12.2011
comment
Вам просто нужно положить его в пролет. Это по-прежнему часть списка данных, просто с отдельным фокусом от остальных данных для этого элемента списка. - person animuson; 10.12.2011
comment
Почему не тег ‹p›? Или, возможно, список (каждая адресная строка является элементом списка)? Должен существовать стандартный способ разметки адреса. Я не могу быть первым, кто столкнулся с этой проблемой. - person StackOverflowNewbie; 10.12.2011
comment
Было бы семантически неправильно помещать абзац в список. Вы можете сделать каждый элемент в списке другим списком, если хотите, я не вижу никаких проблем с этим семантически. - person animuson; 10.12.2011

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

person blakeembrey    schedule 10.12.2011
comment
Кроме того, не паникуйте по поводу использования для этого элемента адреса. Элементы HTML5 должны быть универсальными, и в них должно быть то, что, по вашему мнению, должно быть. На мой взгляд, адрес кажется правильным элементом для использования в этой ситуации, и кто может наказать вас за это. - person blakeembrey; 10.12.2011
comment
Меня не интересуют поисковые системы. Просто хочу правильно расставить отметки. Я не использую HTML5. Я хочу, чтобы решение работало для HTML5 и более ранних версий. Предоставленная вами ссылка сталкивается с той же проблемой, что и визитная карточка: что делать, если доступны не все элементы адреса? - person StackOverflowNewbie; 10.12.2011
comment
@blameembrey Я не согласен с вашим комментарием. В спецификации прямо указано, что <address> следует использовать только для представления контактной информации автора статьи или документа. Нельзя просто идти вперед и использовать элементы по своему усмотрению по любой причине; поэтому существуют спецификации. Я думаю, что ваш первоначальный ответ правильный, что на данный момент лучше всего использовать тип элемента Schema.org PostalAddress с реквизитами элемента address или location. Элемент должен быть <p>, если он автономный, <li>, если в списке, <td>, если в таблице и т. д. - person chharvey; 22.08.2016
comment
@chharvey Этим комментариям почти 5 лет, но я все еще думаю, что они актуальны. Если бы вы хотели пометить что-то для программного доступа, вы, вероятно, обратились бы к спецификациям JSON-LD или микроданных. Если адреса связаны с основным контентом на странице, вы можете использовать элемент <address>. Этот комментарий не имел в виду: делай, что хочешь, это дикий запад, но сегодня я вижу, как это выглядит. Так что да, используйте элемент, который семантически подходит для вашей ситуации. - person blakeembrey; 23.08.2016

В настоящее время не существует специального элемента для разметки физического адреса или почтового адреса. Вы правы: <address> следует использовать только для представления контактной информации автора статьи или документа, поэтому вы не должны использовать его, например, для разметки адресов в списке компаний.

Когда HTML не существует для определенной семантики, лучше всего разметить элемент, наиболее близкий по смыслу, а затем использовать вспомогательные стандарты, такие как (1) классы микроформата, (2) атрибуты микроданных и/или (3) роли ARIA. . Лично я предпочитаю микроданные микроформатам, потому что микроданные не мешают атрибуту [class], который предназначен для стилей. Я не люблю смешивать семантику со стилем. Роли ARIA предназначены для доступности, и я не знаю о них достаточно, чтобы много говорить, но их очень хорошо иметь в вашем коде.

Ознакомьтесь с синтаксисом микроданных (расширение HTML). Микроданные — это официальный синтаксис в разметке, а Schema.org — очень популярный (Google его любит) словарь для использования с синтаксисом. Есть и другие менее популярные словари.

Чтобы разметить физический адрес, используйте тип элемента Schema.org PostalAddress с соответствующими свойствами. Честно говоря, лучшим элементом для использования был бы старый добрый <p>.

<p itemscope itemtype="http://schema.org/PostalAddress">
  <span itemprop="name">The White House</span>
  <br/>
  <span itemprop="streetAddress">1600 Pennsylvania Avenue</span>
  <br/>
  <span itemprop="addressLocality">Washington</span>,
  <span itemprop="addressRegion">DC</span>
  <span itemprop="postalCode">20500</span>
  <br/>
  <data itemprop="addressCountry" value="US">United States of America</data>
  <br/>
  <span itemprop="url">https://www.whitehouse.gov/</span>
</p>

Элемент <br/> предназначен для обеспечения (семантических, значимых) разрывов строк в содержании, поэтому его использование здесь оправдано в почтовом адресе. Это также чрезвычайно традиционный вариант использования. Однако можно утверждать, что <pre> работает так же хорошо, поскольку это технически предварительно отформатированный текст.

<pre itemscope itemtype="http://schema.org/PostalAddress">
  <span itemprop="name">The White House</span>
  <span itemprop="streetAddress">1600 Pennsylvania Avenue</span>
  <span itemprop="addressLocality">Washington</span>, <span itemprop="addressRegion">DC</span> <span itemprop="postalCode">20500</span>
  <data itemprop="addressCountry" value="US">United States of America</data>
  <span itemprop="url">https://www.whitehouse.gov/</span>
</pre>
person chharvey    schedule 22.08.2016