Тег
<div>
— это самый универсальный и широко используемый HTML-элемент. Сам по себе
<div>
не представляет ничего, но он, в то же время, позволяет разработчикам превратить его почти во всё что угодно. Делается это посредством использования CSS (для стилизации), JavaScript (для функционала) и ARIA (для обеспечения доступности контента).
Эта универсальность позволяет использовать теги
<div>
для множества самых разных целей, но, к сожалению, такая вседозволенность может легко привести к злоупотреблениям. Когда тегом
<div>
пользуются недостаточно осмотрительно, в итоге может получиться
<div>-суп, контент, лишённый семантического значения, интерактивные элементы, не отличающиеся доступностью, или некая комбинация этих нехороших явлений.
Грубые нарушения при использовании
<div>
выявить сравнительно просто (подробнее об этом поговорим ниже). Но мы дошли до того, что кто-то может назвать «образцом недоступности контента» полностью правильное использование
<div>
, или, как минимум, пример лёгкого отклонения от правильности. В таких ситуациях говорят о том, что «кому-то стоило бы вместо
<div>
воспользоваться семантическим HTML-элементом».
Тег <div> приходит на вечеринку, где его встречает команда A11y
Ладно. Притормозим немного. Прежде чем дружно задирать нос перед применением тегов
<div>
— давайте вспомним о том, что контекст — это важно.
Конечно, всегда, когда это возможно, нужно использовать семантические элементы. Но предлагаю проявить осторожность, создавая такую атмосферу, когда может показаться, что любой вариант использования
<div>
— это плохо… или — что замена некоего
<div>
на «более семантический» элемент способна улучшить доступность некоего документа.
Прежде чем об этом поговорить — ненадолго вернёмся в прошлое и заглянем туда, откуда взялся тег
<div>
.