Глобальные или общие атрибуты для всех элементов страницы. Список ниже расположен по популярности атрибутов на взгляд авторов данного сайта.
| Атрибут | Описание |
|---|---|
| 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. Они нужны, чтобы роботы лучше понимали, какая информация расположена на странице.
