Глобальные или общие атрибуты для всех элементов страницы. Список ниже расположен по популярности атрибутов на взгляд авторов данного сайта.
Атрибут | Описание |
---|---|
class | Определяет один или больше классов элемента, разделенных пробелом. Классы необходимы для задания стилей элементам или доступа с помощью JS. Регистро зависимый. Название класса должно состоять из латинских букв, цифр, дефис – и нижнее подчеркивание _. Название не должно начинаться с цифры. Несмотря на то, что в HTML5 эти ограничения не действуют, лучше их придерживаться для совместимости со старыми браузерами. |
id | Определяет идентификатор элемента. Должен быть уникальным для страницы. Используется для переходов к элементам, для доступа с помощью JS. Не рекомендуется использовать для задания стилей. |
style | Содержит стили CSS для визуального оформления элемента. Лучше не использовать для верстки сайта, только в целях тестирования или оформления контента в записях. |
title | Дополнительная информация об элементе. Обычно отображается всплывающей подсказкой при наведении на элемент. Внешний вид всплывающей подсказки зависит от браузера и ОС. |
data-* | Используется для хранения данных. Например, data-id=”12″. Обычно эти данные не должны быть видны на странице, часто используются в скриптах. |
lang | Определяет язык элемента. Например, ru (русский), en (английский), uk (украинский). Сам документ может иметь один язык, а какие-то дочерние элементы другой язык. |
dir | Определяет направление текста в элементе, слева направо (ltr) или справа налево (rtl). |
hidden | Скрывает элемент со страницы. Учтите, что он останется виден в исходном коде, поэтому не должен содержать приватной информации. |
tabindex | Устанавливает порядок перехода по элементам с помощью клавиши Tab. Если значение отрицательное, например -1 , значит элемент не будет доступен через Tab. Если значение 0 — элемент доступен и порядок определяет браузер. Если значение больше 0, например 1 , 2 , 3 и т.д. — элемент доступен для фокуса с клавиатуры и порядок определяется этими числами. |
translate | Будет ли переводиться текстовое содержимое элемента или нет. Если пустое значение или yes — будет переведен. Если значение no — не будет переведен. |
contenteditable | Определяет, можно ли редактировать контент в элементе. Можно установить true (правда, можно редактировать) или false (ложь, нельзя редактировать). |
draggable | Определяет, можно ли перетаскивать элемент. Можно установить true (правда, можно перетаскивать) или false (ложь, нельзя перетаскивать). |
spellcheck | Определяет проверку на орфографические ошибки. Можно установить true или false . Работает в основном для редактируемых элементов, полей форм или с установленным атрибутом contenteditable . |
accesskey | Определяет сочетание клавиш для быстрого доступа к элементу. Значение может быть 1 символ (буква, цифра, спецсимвол). У каждого браузера свое сочетание клавиш для доступа к элементам. Chrome Windows: Alt + key, Mac: Control+ Alt+key Safari Windows: Alt + key, Mac: Control+ Alt+key Firefox Windows: Alt+ Shift+key, Mac: Control+ Alt+key Opera Windows: Alt + key, Mac: Control+ Alt+key |
Не для каждого элемента будет виден результат применения глобальных атрибутов.
Кроме перечисленных, есть и другие атрибуты, например: aria-*
, которые улучшают доступность элементов.
Отдельно есть список обработчиков событий, например: onsubmit
, onscroll
, onmouseenter
, onkeydown
и другие, которые применяются в основном с JavaScript.
Отдельный список для микроразметки, это itemscope
, itemprop
, itemtype
. Они нужны, чтобы роботы лучше понимали, какая информация расположена на странице.