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

?v=1

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

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

Элемент address


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


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

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

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


Элемент ol


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


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

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

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


Элемент time


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

October 5
two days ago
a Saturday


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

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

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



© Habrahabr.ru