Справочник по атрибутам HTML

Элементы в HTML имеют атрибуты; это дополнительные значения, которые настраивают элементы или изменяют их поведение различными способами для удовлетворения потребностей пользователей.

В HTML большинство атрибутов имеют две стороны: атрибут содержимого и атрибут IDL (Interface Definition Language).

Атрибут содержимого — это атрибут, который вы задаёте из содержимого (HTML-кода), и вы можете задать или получить его с помощью element.setAttribute() или element.getAttribute(). Атрибут содержимого всегда является строкой, даже когда ожидаемое значение должно быть целым числом. Например, чтобы установить атрибут maxlength элемента <input> в 42 с помощью атрибута содержимого, вам нужно вызвать setAttribute("maxlength", "42") для этого элемента.

Атрибут IDL также известен как свойство JavaScript. Это атрибуты, которые вы можете читать или устанавливать с помощью свойств JavaScript, таких как element.foo. Атрибут IDL всегда будет использовать (но может преобразовывать) лежащий в основе атрибут содержимого, чтобы возвратить значение при получении и сохранит что-то в атрибуте содержимого при установке. Другими словами, атрибуты IDL по сути отражают атрибуты содержимого.

Большую часть времени атрибуты IDL будут возвращать значения так, как они действительно используются. Например, значение по умолчанию type для элементов <input> равно "text", поэтому, если вы установите input.type="foobar", элемент <input> будет иметь тип текста (по внешнему виду и поведению), но значение атрибута содержимого "type" будет "foobar". Однако атрибут IDL type вернёт строку "text".

Атрибуты IDL не всегда являются строками; например, input.maxlength — это число (целое со знаком). При использовании атрибутов IDL вы читаете или устанавливаете значения желаемого типа, поэтому input.maxlength всегда будет возвращать число, а при установке input.maxlength требуется число. Если вы передадите другой тип, он автоматически будет преобразован в число в соответствии со стандартными правилами JavaScript для преобразования типов.

Атрибуты IDL могут отражать другие типы, такие как беззнаковое целое, URL-адреса, логические значения и т. д. К сожалению, нет чётких правил, и поведение атрибутов IDL в сочетании с соответствующими атрибутами содержимого зависит от атрибута. Большую часть времени он будет следовать правилам, изложенным в спецификации, но иногда этого не происходит. Спецификации HTML стараются сделать это максимально удобным для разработчиков, но по различным причинам (в основном историческим) некоторые атрибуты ведут себя странно (например, select.size) и вы должны ознакомиться со спецификациями, чтобы понять, как именно они работают.

Некоторые атрибуты содержимого (например, required, readonly, disabled) называются логическими атрибутами. Если логический атрибут присутствует, его значение равно true, а если его нет, его значение равно false.

HTML определяет ограничения на допустимые значения логических атрибутов: если атрибут присутствует, его значение должно быть либо пустой строкой (эквивалентно, атрибут может иметь неопределённое значение), либо значением, которое является регистронезависимым совпадением с каноническим именем атрибута, без ведущих и хвостовых пробелов. Вот несколько примеров корректной разметки логического атрибута:

<div itemscope>This is valid HTML but invalid XML.</div>
<div itemscope=itemscope>This is also valid HTML but invalid XML.</div>
<div itemscope="">This is valid HTML and also valid XML.</div>
<div itemscope="itemscope">
  This is also valid HTML and XML, but perhaps a bit verbose.
</div>

Для ясности, значения "true" и "false" не допускаются для логических атрибутов. Чтобы представить ложное значение, атрибут должен быть полностью опущен. Это ограничение проясняет некоторые распространённые недоразумения: в случае с checked="false", атрибут checked элемента интерпретируется как true, потому что атрибут присутствует.

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

Все атрибуты обработчиков событий принимают строку. Строка используется для генерации функции JavaScript, такой как function name(/*args*/) {body}, где name — имя атрибута, а body — значение атрибута. Обработчик получает те же параметры, что и его аналог JavaScript-обработчика событий — большинство обработчиков получают только один параметр event, в то время как onerror получает пять: event, source, lineno, colno, error. Это означает, что вы можете, как правило, использовать переменную event внутри атрибута.

<div onclick="console.log(event)">Click me!</div>
<!-- The synthesized handler has a name; you can reference itself -->
<div onclick="console.log(onclick)">Click me!</div>

• HTML-элементы