Недавно я прочитал спецификации и понял, что мы используем ограниченный набор 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>Комментарии (14)
k12th
12.12.2019 22:17Вот если бы у
addressбыли вложенные тэги с семантикой, то да, был бы толк, а так — микроформаты полезнее.
Iv38
13.12.2019 01:18Согласен. А язык разметки освобождается от необходимости быть «швейцарским ножом». Мне кажется, избыточная ответственность за семантику в своё время сильно усложнила развитие HTML.
AlexKornyukhina
12.12.2019 22:50-1А меня вот смущает, почему 2 дня назад — это 29 января, а суббота — 23 сентября?
orcy
13.12.2019 10:33Получится ли какой-либо измеримый результат от такого рода изменений.
Двойственное ощущение — с одной стороны человек хочет передать семантику, с другой стороны если всем пофиг (нет какого-то значительного видимого эффекта) — то зачем?
codemafia
13.12.2019 11:01Слабовидящим будет проще воспринимать информацию из тега time, а вот нумерованные списки усложнят процесс, так как скринридеру придется сообщать порядковый номер элемента при перемещении.
HawkeyePierce89
13.12.2019 12:48Теги списков вообще не нужно использовать в хлебных крошках, меню и подобных местах, т.к. теги списков это теги контента. А хлебные крошки и меню это служебная информация.
Shtucer
Не распарсил. Как может порядок элементов в breadcrumb изменить значение веб-сайта? Мне почему-то кажется, что пример для описания разницы между ol (упорядоченный список) и ul (неупорядоченный список) несколько натянут или не полностью раскрыт.
xpert13
Согласен. Да и сам тег ol вряд ли забыт, так как активно используется контентщиками при оформлении обычных нумерованных списков внутри текстовой части статьи.
Aingis
Видимо, здесь имеется в виду, что «хлебные крошки» — это вложенный список, следовательно, порядок имеет значение. Будет ли тут уместен упорядоченный список, не уверен.
Iv38
Да, семантика нумерованного списка сомнительна и для «хлебных крошек» и даже для постраничной навигации, на мой взгляд.
Ну а в качестве собственно нумерованного списка ol и так никто не забывал.
domix32
Вообще хлебными крошками зовется элемент, который позволяет возвращаться к определенным узлам некоторого дерева. Например всякие файловые проводники обычно имеют что-то наподобие
/[usr]/[local]/binгде соотвественноusrиlocalактивируемые элементы. Какое отношение к этому элементу должны иметь сортированные списки не очень понятно.Содержание книги (например) в качестве примера имело бы куда больший смысл
Ashot
Подумал сначала, что корявый перевод, заглянул в оригинал:
… И всё равно не понял
BerkutEagle
Я так понял: breadcrumb однозначно указывают на текущее местонахождение пользователя в дебрях сайта. Сменились крошки — значит куда-то перешли. Для зрячих людей не составит труда сориентироваться без этого (и то не всегда), но скринридеры могут запутаться.
Сейчас полно SPA, у которых url и title не меняются при переходах из раздела в раздел, а вот хлебные крошки скорее всего изменятся.