Клавиша / esc
Принц в руках держит лягушку в короне
Иллюстрация: Кира Кустова

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

Атрибуты, которые подходят к каждому тегу.

Время чтения: 6 мин

Кратко

Скопировано

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

Пример

Скопировано

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

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

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

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

        
        
          
        
      

Как пишется

Скопировано

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

class

Скопировано

Позволяет выбирать конкретный элемент (или несколько) при помощи CSS или JavaScript. В качестве значения для атрибута class задают один или несколько классов для HTML-элемента, разделённые пробелом.

contenteditable

Скопировано

Делает любой элемент на странице редактируемым. В качестве значения для атрибута contenteditable используют true или false. А можно записать совсем без значения, тогда наличие самого атрибута будет равно contenteditable="true".

        
          
          <!-- Можно так --><div contenteditable></div><!-- Или так --><div contenteditable="true"></div>
          <!-- Можно так -->
<div contenteditable></div>

<!-- Или так -->
<div contenteditable="true"></div>

        
        
          
        
      

data-*

Скопировано

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

hidden

Скопировано

hidden не требует явного указания значения, наличие атрибута само по себе означает состояние true. Прячет со страницы любой HTML-элемент. Причём элемент невидим не только для глаз пользователя, но и для скринридеров.

id

Скопировано

Важно, чтобы значение идентификатора было уникальным в рамках одной страницы. Позволяет создавать якоря — ссылки на части страницы, выбирать уникальный элемент при помощи CSS или JavaScript. Значение: одно слово или набор символов, не может содержать пробелы. Позволяет сделать один из элементов на странице уникальным.

lang

Скопировано

Определяет, на каком языке написан текст внутри элемента, для которого задан этот атрибут. Удобно, если в вашем тексте есть цитаты или выдержки из документа на другом языке. Подстраивает пунктуацию и оформление под стандарты указанного языка. Значение: указание языка в формате BCP47. Список значений lang.

dir

Скопировано

Определяет направление письма — справа налево, как в английском, или слева направо, как в иврите. Значение: ltr — направление слева направо, rtl — справа налево и auto — определяется браузером.

spellcheck

Скопировано

С помощью этого атрибута мы указываем браузеру, что в элементе, которому он задан, нужно проверить правописание. Значение: true или false.

translate

Скопировано

Указывает на возможность перевести текст элемента. Полезен для локализации содержимого. Значение: пустая строка или yes — текст может быть переведён, no — не переводить содержимое тега.

style

Скопировано

Позволяет прописывать стили прямо внутри HTML-разметки. Внимание: это считается антипаттерном и может быть использовано только для проверки гипотез. Значение: любые правила CSS в соответствующем формате.

tabindex

Скопировано

tabindex указывает браузеру, нужно ли видеть этот элемент при навигации по странице с помощью клавиатуры. Часто используется для неинтерактивных элементов.

Значение: отрицательное или положительное целое число. Отрицательное число — элемент может быть выделен, но не участвует в последовательной цепочке навигации. 0 — элемент включается в цепочку последовательной навигации, но порядок остаётся на усмотрение браузера. Положительное число — элемент участвует в последовательной навигации, причём чем больше указанное значение, тем выше элемент будет в цепочке навигации. Если у нескольких элементов одинаковые значения, то они идут по порядку следования в HTML.

title

Скопировано

Позволяет добавить любому элементу подсказку, некую дополнительную информацию. Может, но не обязательно будет показан пользователю в виде всплывающего окна при задержке курсора над элементом. Редко используется в реальной практике из-за невозможности стилизовать всплывающий элемент. Плюс значение этого тега зачитывается не всеми скринридерами, что делает часть информации недоступной для пользователей с ограниченными возможностями. Не надо так.

role

Скопировано

Добавляет к тегу явную роль. Благодаря атрибуту даже у семантически нейтральных <div> и <span> появляется смысл для скринридеров и других вспомогательных технологий. Значение: любая ARIA-роль.

inert

Скопировано

inert похож на другой атрибут disabled. Делает элементы неактивными. По ним нельзя кликнуть, сделать фокус с клавиатуры, ввести в них данные, а ещё скрывает их от скринридеров. Можно задавать даже группе элементов. Например, всей форме <form>.

accesskey

Скопировано

Добавляет подсказку о том, какое клавиатурное сокращение поддерживает элемент. В ARIA то же самое делает aria-keyshortcuts. Значение: список клавиш, разделённых пробелом.

enterkeyhint

Скопировано

Определяет, какой клавишей на устройствах с экранной клавиатурой можно совершить действие с элементом. Показывает название клавиши или иконку рядом с тегом, которому задан атрибут. Значение: enter, done, go, next, previous, search или send.

draggable

Скопировано

Означает, что элемент можно перетаскивать. Используется для драг-н-дроп. Значение: true или false.

itemscope

Скопировано

Связывает в один элемент несколько, когда они содержат данные в виде пары ключ-значение. Один из атрибутов для структурирования данных.

itemprop

Скопировано

Содержит уникальные значения элементов из группы, связанной в один элемент через itemscope. Значение: произвольная строка текста.

itemtype

Скопировано

Тип структуры данных у элементов внутри группы itemscope. Значение: ссылка на нужную таблицу на Schema.org.

itemid

Скопировано

Добавляет к элементу внутри itemscope уникальный идентификатор. Можно задать элементу, у которого есть другой атрибут itemtype. Значение: уникальный URL, связанный со Schema.org.

itemref

Скопировано

Тоже добавляет к элементу внутри itemscope уникальный идентификатор. Можно задать элементу с атрибутом itemtype. Значение: одно или несколько ID, которые разделены пробелом.

На собеседовании

Скопировано
Задать вопрос в рубрику
🤚 Я знаю ответ

Это вопрос без ответа. Вы можете помочь! Чтобы написать ответ, следуйте инструкции.