Глобальные атрибуты HTML

Глобальные атрибуты — это атрибуты, которые можно добавить к любому HTML-элементу. В отличие от атрибутов, специфичных для конкретных элементов — таких как href (только для <a>), src (только для <img>) или colspan (только для ячеек таблицы) — глобальные атрибуты входят в общий словарь, понятный каждому тегу.

Именно это делает их такими важными: вместо того чтобы изучать отдельный атрибут для каждого элемента, вы усваиваете один набор глобальных атрибутов и применяете его повсюду. Вы будете использовать class и id, чтобы связывать элементы с CSS и JavaScript, data-* — для хранения пользовательских данных, tabindex — для управления фокусом с клавиатуры, lang и dir — чтобы сделать контент доступным на любом языке, а hidden, title или contenteditable — для типичных задач UI.

То, что глобальный атрибут допустим для элемента, не означает, что он всегда производит видимый эффект. Например, spellcheck не изменит поведение или семантику абзаца, а lang не даст эффекта на элементе без текстового содержимого. Это нормально — они разрешены везде; там, где им нечего делать, они просто ничего не делают.

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

Атрибут id

id присваивает элементу уникальное имя на странице. Это якорь, связывающий HTML с остальной частью платформы: CSS может обратиться к нему через #name, JavaScript — через document.getElementById(), метка может привязать элемент управления формы через for, а ссылка может перейти прямо к нему.

<h2 id="install">Installation</h2>

<!-- Clicking this link scrolls to the heading above -->
<a href="#install">Jump to Installation</a>

Значение должно быть уникальным в пределах документа и не содержать пробелов. Дублирующиеся id недопустимы и приводят к тому, что getElementById() возвращает только первое совпадение. Подробнее — в главе об атрибуте id, а якорные ссылки рассматриваются в разделе HTML-ссылки.

Атрибут class

Если id предназначен для одного элемента, то class — для групп элементов с общими стилями или поведением. Один элемент может иметь несколько классов, разделённых пробелами, а один и тот же класс можно использовать на сколь угодно многих элементах.

<button class="btn btn-primary">Save</button>
<button class="btn btn-secondary">Cancel</button>

Обе кнопки используют класс btn (общие стили) и добавляют ещё один класс для своего варианта. Это основа применения CSS — смотрите Селекторы CSS и CSS id и class.

Пользовательские атрибуты data-*

data-* позволяет хранить собственные данные в элементе без изобретения нестандартных атрибутов. Любой атрибут, чьё имя начинается с data-, является допустимым и игнорируется браузером при отрисовке — он существует исключительно для ваших скриптов.

<button id="cart" data-product-id="42" data-price="19.99">
  Add to cart
</button>

<script>
  const btn = document.getElementById("cart");

  // A "data-foo-bar" attribute is read as element.dataset.fooBar
  console.log(btn.dataset.productId); // "42"
  console.log(btn.dataset.price);     // "19.99"
</script>

Обратите внимание на правило именования: атрибут data-product-id становится dataset.productId в JavaScript — префикс data- отбрасывается, а каждый сегмент через дефис переводится в camelCase. Значения всегда являются строками, поэтому при необходимости преобразуйте их (Number(btn.dataset.price)).

Атрибут tabindex

tabindex управляет тем, может ли элемент получить фокус с клавиатуры и в каком порядке клавиша Tab переходит к нему. Существует три значимых случая:

• tabindex="0" — добавляет элемент в естественный порядок табуляции, в позицию, определяемую его местом в документе. Используйте это, чтобы сделать обычно нефокусируемый элемент (например, <div>, превращённый в пользовательский виджет) доступным с клавиатуры.
• tabindex="-1" — исключает элемент из порядка табуляции, но позволяет сфокусироваться на нём через JavaScript посредством element.focus(). Полезно для перемещения фокуса в область (например, диалог или сводку ошибок) без включения её в последовательность Tab.
• Положительное значение (tabindex="1" и выше) — перемещает элемент в начало порядка табуляции, перед всеми элементами с tabindex="0" или без tabindex. Это антипаттерн: он переопределяет естественный порядок чтения и почти всегда сбивает с толку пользователей клавиатуры. Избегайте его.

<!-- Reachable by keyboard, in normal order -->
<div tabindex="0" role="button">Custom button</div>

<!-- Focusable by script only, skipped by Tab -->
<div id="dialog" tabindex="-1">Dialog content</div>

Доступное правило: пусть порядок в DOM определяет порядок табуляции. Используйте 0 и -1 осознанно, а положительные значения не используйте никогда.

Атрибут contenteditable

contenteditable="true" делает содержимое элемента напрямую редактируемым пользователем, превращая обычный <div> в базовую поверхность для форматированного текста. contenteditable="false" (по умолчанию) сохраняет его в режиме только для чтения.

<div contenteditable="true">
  Click here and start typing — this text is editable.
</div>

Это строительный блок для встроенных редакторов и полей заметок. Поскольку пользователь может изменять DOM, считывайте текущий текст в JavaScript через textContent или innerHTML элемента, когда нужно его сохранить.

Атрибуты lang и dir (интернационализация)

lang объявляет язык содержимого элемента с помощью кода языка, например en, fr или ar. Установка lang на элементе <html> важна для доступности: экранные дикторы используют его для выбора правильного произношения и голоса, а поисковые системы и инструменты перевода — для определения языка.

dir задаёт базовое направление текста — ltr (слева направо, по умолчанию), rtl (справа налево, для таких языков, как арабский и иврит) или auto (браузер определяет направление из содержимого).

<html lang="en">
  <body>
    <p>This paragraph reads left to right.</p>

    <!-- An Arabic phrase that reads right to left -->
    <p lang="ar" dir="rtl">مرحبا بكم في عالم البرمجة</p>
  </body>
</html>

Подробнее о вёрстке справа налево смотрите CSS-свойство direction. Всегда устанавливайте lang на <html>, а также добавляйте его к любому встроенному содержимому, меняющему язык — правильная расстановка этих атрибутов является одним из простейших и наиболее эффективных улучшений доступности страницы.

Замечания о доступности

Несколько глобальных атрибутов непосредственно влияют на вспомогательные технологии, поэтому применяйте их с осторожностью:

• lang — необходим для корректного чтения содержимого экранными дикторами на нужном языке и с нужным произношением. Устанавливайте его на <html> и на любом элементе, язык которого отличается от языка страницы.
• dir — обеспечивает корректное отображение и навигацию для языков с направлением справа налево. Используйте его совместно с lang для RTL-контента.
• tabindex — положительные значения нарушают ожидаемый порядок фокуса для пользователей клавиатуры и экранных дикторов; придерживайтесь 0 и -1.
• accesskey — его клавиатурные сокращения часто конфликтуют с сокращениями браузеров и вспомогательных технологий, поэтому выбранная клавиша может работать не у всех. Рассматривайте его как удобство, но не как единственный способ добраться до функции.

Итоги

Несколько глобальных атрибутов стоит знать досконально, так как вы будете использовать их постоянно: id, class, data-*, tabindex и пара для интернационализации lang / dir. Остальные — title, hidden, contenteditable, draggable, spellcheck, translate, style, accesskey — полезно знать в лицо и при необходимости сверяться с таблицей выше. А удалённых атрибутов (contextmenu, dropzone) следует избегать полностью — они больше не являются частью HTML.

Практика