Привет, Хабр! Представляю вашему вниманию перевод статьи «Top 3 HTML elements that we forgot» автора Stas Melnikov.
Недавно я прочитал спецификации и понял, что мы используем ограниченный набор HTML-элементов. Поэтому хотел бы рассказать о трёх элементах, которые мы забыли, но которые есть в каждом проекте.
Часто нужно разметить блок социальных сетей или другую контактную информацию в наших проектах. Обычно разработчики используют следующий код:
Но спецификация WHATWG содержит специальный элемент address для этой задачи.
Мы должны использовать списки для разметки таких элементов навигации, как breadcrumb, pagination и т.д. Это необходимо, чтобы помочь экранным считывающим устройствам озвучивать количество элементов в навигации.
Обычно мы используем элемент ul. Но спецификация содержит более подходящий тег — ol. В спецификации WHATWG говорится:
Мы используем элемент span для разметки дат различных публикаций.
Но мы можем использовать для этого тег time, который содержится в спецификации WHATWG. Вот что говорится в спецификации WHATWG:
Недавно я прочитал спецификации и понял, что мы используем ограниченный набор 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>