Главная -> Статьи о HTML5 -> Использование тега address

Использование тега address

Этот элемент был введен еще в спецификации HTML3 в 1995 году и дожил до сегодняшних дней в спецификации HTML5. Но на протяжении всех пятнадцати лет разработчики спорили как правильно использовать этот элемент. Давайте вместе разберемся с этим!

Давайте обратимся к спецификации, где говорится примерно следующее:

Элемент address несет в себе контактную информацию для всего сайта или какой-то его части. Такая информация может быть, например, именами авторов документа, ссылками на их веб-страницы, адресами электронной почты для обратной связи, почтовыми адресами, телефонными номерами и т.д. Элемент address не следует использовать для всех почтовых и e-mail адресов; сюда нужно помещать только контактную информацию людей так или иначе связанных с этим документом.

Из всего вышесказанного можно построить небольшой пример:

<p>Над сайтом работали следующие люди:</p>
<address>
<a href="http://alexandersavelev.com/">Александр Савельев</a>,
<a href="http://example.com/">Вася Пупкин</a>,
<a href="http://хтмл5.рф/">Василий Тёркин</a>,
</address>

Теперь давайте разберемся как не следует использовать элемент address? На следующем примере показано неправильное использование этого тега:

<address>
Вася Пупкин<br>
Чичканова,<br>
Тамбов,<br>
Россия<br>
Tel: +7 (920)XXX XX XX
</address>

Никак не можете понять, что тут неправильно? Все очень просто! В спецификации сказано, что элемент address нельзя использовать для выделения почтовых адресов, кроме тех, что явно связаны с данным документом.

Как же выделить почтовые адреса? Для этого можно использовать микроформаты. О них мы расскажем в одной из наших следующих статей, но вот небольшой пример:

<div class="vcard">
<p class="fn"><a class="url" href="#">Вася Пупкин</a><p>
<p class="adr">
<span class="street-address">Чичканова 35</span><br>
<span class="region">Тамбов</span><br>
<span class="postal-code">392008</span><br>
<span class="country-name">Россия</span>
</p>
<p class="tel">+7 (920)XXX XX XX</p>
</div>