skip to main content

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

html

Кратко 🔗

Существует категория HTML-атрибутов, которые можно применить к любому или почти любому HTML-тегу.

Пример 🔗

Примером глобального атрибута, с которым вы точно работаете постоянно — атрибут class. Его можно задать для абсолютно любого тега. Что очень круто, иначе нам было бы гораздо сложнее стилизовать страницу.

<div class="parent">Простой div</div>

<span class="parent">Простой span</span>

<h1 class="parent">Простой h1</h1>

Как пишется 🔗

Ниже приведён список глобальных атрибутов с кратким описанием для каждого.

  • class — значение: один или несколько классов для HTML-элемента, разделённые запятой. Позволяет выбирать конкретный элемент / элементы при помощи CSS или JavaScript.
  • contenteditable — значение: булевое значение true / false. Делает любой элемент на странице редактируемым. Не имеет сокращённой записи.
<!-- Неверно -->
<div contenteditable></div>

<!-- Верно -->
<div contenteditable="true"></div>
  • data-* — группа атрибутов, позволяющая перекидывать данные между HTML и DOM. Часто используется для взаимодействия с HTML при помощи JavaScript. Если не требуется менять внешний вид элемента, то это удобнее, чем передёргивать классы.
  • hidden — не требует явного указания значения, наличие атрибута само по себе означает состояние true. Прячет со страницы любой HTML-элемент. Причём элемент невидим не только для глаз пользователя, но и для скринридеров.
  • id — значение: одно или несколько слов, разделённых пробелом. Позволяет сделать один из элементом на странице уникальным. Важно чтобы значение идентификатора было уникальным в рамках одной страницы. Позволяет создавать анкоры — ссылки на части страницы, выбирать уникальный элемент при помощи CSS или JS.
  • lang — значение: указание языка в формате BCP47. Список значений. Определяет, на каком языке написан текст внутри элемента, для которого задан этот атрибут. Удобно, если в вашем тексте есть цитаты или выдержки из документа на другом языке. Подстраивает пунктуацию и оформление под стандарты указанного языка.
  • spellcheck — значение: булевое значение true / false. С помощью этого атрибута мы указываем браузеру, что нужно проверить правописание в данном элементе.
  • style — значение: любые правила CSS в соответствующем формате. Позволяет прописывать стили прямо внутри HTML-разметки. Внимание: это считается антипаттерном и может быть использовано только для проверки гипотез.
  • tabindex — значение: отрицательное или положительное целое число. Указывает браузеру, нужно ли видеть этот элемент при навигации по странице при помощи клавиатуры. Часто используется для не интерактивных элементов. Отрицательное число: элемент может быть выделен, но не участвует в последовательной цепочке навигации. 0: элемент включается в цепочку последовательной навигации, но порядок остаётся на усмотрение браузера. Положительное число: элемент участвует в последовательной навигации, причём чем больше указанное значение, тем выше элемент будет в цепочке навигации. Если у нескольких элементов одинаковые значения, то они идут по порядку следования в HTML.
  • title — позволяет добавить любому элементу подсказку, некую дополнительную информацию. Может, но не обязательно будет показано пользователю в виде всплывающего окна при задержке курсора над элементом. Редко используется в реальной практике из-за невозможности стилизовать всплывающий элемент. Плюс значение этого тега зачитывается не всеми скринридерами, что делает часть информации недоступной для пользователей с ограниченными возможностями. Не надо так.

На самом деле список универсальных атрибутов чуть шире, но мы приняли решение не указывать в этой статье те атрибуты, у которых плохая поддержка браузерами. Со временем этот список может меняться и дополняться.

Автор: Алёна,