Топ-3 HTML-элемента, которые мы забыли

Привет, Хабр! Представляю вашему вниманию перевод статьи «Top 3 HTML elements that we forgot» автора Stas Melnikov.

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

Элемент address

Часто нужно разметить блок социальных сетей или другую контактную информацию в наших проектах. Обычно разработчики используют следующий код:

<div class="my-social">   <ul>     <li><a href="github.com">Fork me on Github</a></li>     <li><a href="twitter.com">Follow me on Twitter</a></li>     <li><a href="linkedin.com">My LinkedIn</a></li>   </ul> </div>

Но спецификация WHATWG содержит специальный элемент address для этой задачи.

Элемент address представляет контактную информацию для ближайшего элемента-предка article или body. Если это элемент body, то контактная информация применяется ко всему документу целиком.

Таким образом, следующий код является более верным:

<address class="my-social">   <ul>     <li><a href="github.com">Fork me on Github</a></li>     <li><a href="twitter.com">Follow me on Twitter</a></li>     <li><a href="linkedin.com">My LinkedIn</a></li>   </ul> </address>

Элемент ol

Мы должны использовать списки для разметки таких элементов навигации, как breadcrumb, pagination и т.д. Это необходимо, чтобы помочь экранным считывающим устройствам озвучивать количество элементов в навигации.

<nav class="breadcrumb">   <ul>     <li><a href="#">Home</a></li>     <li><a href="#">Design Patterns</a></li>     <li><a href="#">Breadcrumb Pattern</a></li>   </ul> </nav>

Обычно мы используем элемент ul. Но спецификация содержит более подходящий тег — ol. В спецификации WHATWG говорится:

Элемент ol представляет список пунктов, где пункты намеренно упорядочены так, что изменение порядка изменит смысл документа.

Если изменим порядок элементов в навигации breadcrumb, изменим значение веб-сайта. Таким образом, следующий код является более верным:

<nav class="breadcrumb">   <ol>     <li><a href="#">Home</a></li>     <li><a href="#">Design Patterns</a></li>     <li><a href="#">Breadcrumb Pattern</a></li>   </ol> </nav>

Элемент time

Мы используем элемент span для разметки дат различных публикаций.

<span>October 5</span> <span>two days ago</span> <span>a Saturday</span>

Но мы можем использовать для этого тег time, который содержится в спецификации WHATWG. Вот что говорится в спецификации WHATWG:

Элемент time представляет его содержимое наряду с машинно-читаемой формой этого содержимого в атрибуте datetime. Род содержимого ограничен различными датами, временем, часовыми поясами и продолжительностями.

Поэтому мы должны использовать элемент time для разметки дат.

<time datetime="2019-10-05">October 5</time> <time datetime="2019-01-29">two days ago</time> <time datetime="2019-09-23">a Saturday</time>