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