Справочная информация по HTML атрибутам

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

Список атрибутов

Имя атрибута Элементы Описание
hidden Глобальный атрибут Предотвращает генерирование данного элемента, в то время как сохраняет дочерние элементы, например, элементы script, active.
high <meter> Указывает нижнюю границу верхнего диапазона.
href <a>, <area>, <base>, <link> URL связанного ресурса.
hreflang <a>, <area>, <link> Указывает язык связанного ресурса.
http-equiv <meta>
icon <command> Указывает картинку, которая будет представлять команду.
id Глобальный атрибут Часто используется с CSS для стилизации заданного элемента. Значение атрибута должно быть уникальным.
ismap <img> Показывает, что изображение часть серверной карты изображений.
itemprop Глобальный атрибут
kind <track> Указывает вид дорожки текста.
label <track> Указывает читабельный заголовок дорожки текста.
lang Глобальный атрибут Определяет язык для используемого элемента.
language <script> Определяет язык скрипта, используемый в элементе.
list <input> Задаёт список предустановленных опций для предложения пользователю.
loop <audio>, <bgsound>, <marquee>, <video> Указывает, следует ли медиа элементам начинать проигрывание сначала, после их завершения.
low <meter> Указывает верхнюю границу нижнего диапазона.
manifest <html> Задаёт URL кешированного манифеста документа.
max <input>, <meter>, <progress> Указывает максимальное допустимое значение.
maxlength <input>, <textarea> Определяет максимальное количество символов, допустимых в элементе.
media <a>, <area>, <link>, <source>, <style> Задаёт подсказку медиа, для которой, связанный ресурс был спроектирован.
method <form> Определяет, какой HTTP метод использовать, когда отправляются данные формы. Может быть GET (по умолчанию) или POST.
min <input>, <meter> Показывает минимальное допустимое значение.
multiple <input>, <select> Показывает могут ли быть выбраны множественные значения в input типа email или file.
name <button>, <form>, <fieldset>, <iframe>, <input>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param> Имя элемента. К примеру, используется сервером для определения полей отправленной формы.
novalidate <form> Этот атрибут указывает, что форма не должна проверяться, когда передаётся на сервер.
open <details> Указывает, отображать ли детали при загрузки страницы.
optimum <meter> Указывает оптимальное числовое значение.
pattern <input> Определяет регулярное выражение, которое будет проверять входные данные элемента.
ping <a>, <area>
placeholder <input>, <textarea> Предоставляет подсказку пользователю, касательно того, что можно ввести в поле.
poster <video> URL указывающий блок постера для показа, пока пользователь играет или ищет.
preload <audio>, <video> Указывает загружать ли ресурс целиком, его часть или не загружать вовсе.
pubdate <time> Указывает, что эта дата и время являются ли датой ближайшего элемента предка <article>.
radiogroup <command>
readonly <input>, <textarea> Указывает, можно ли редактировать элемент.
rel <a>, <area>, <link> Задаёт отношение целевого объекта к объекту ссылки.
required <input>, <select>, <textarea> Указывает, необходимо ли заполнять этот элемент или нет.
reversed <ol> Указывает, отображать ли список по убыванию, вместо того, чтобы показывать его по возрастанию.
rows <textarea> Определяет количество строк в textarea.
rowspan <td>, <th> Определяет количество строк ячейки таблицы, которые следует охватывать.
sandbox <iframe>
spellcheck Глобальный атрибут Указывает, разрешена ли проверка правописания для этого элемента.
scope <th>
scoped <style>
seamless <iframe>
selected <option> Определяет значение, которое будет выделено при загрузки страницы.
shape <a>, <area>
size <input>, <select> Определяет ширину элемента (в пикселях). Если у элемента значение атрибута type — text или password, тогда это количество символов.
sizes <link>
span <col>, <colgroup>
src <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> URL встраиваемого содержимого.
srcdoc <iframe>
srclang <track>
srcset <img>
start <ol> Определяет первый номер, если это не 1.
step <input>
style Глобальный атрибут Определяет CSS стили, которые перепишут установленные ранее стили.
summary <table>
tabindex Глобальный атрибут Переписывает порядок Tab по умолчанию браузера и следует вместо него заданному.
target <a>, <area>, <base>, <form>
title Глобальный атрибут Текст, который будет отображаться в всплывающей подсказке, когда на него наведут указатель.
type <button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu> Определяет тип элемента.
usemap <img>, <input>, <object>
value <button>, <option>, <input>, <li>, <meter>, <progress>, <param> Определяет значение элемента по умолчанию, которое будет отображаться после загрузки страницы.
width <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> Примечание: в некоторых случаях, таких как <div>, это устаревший атрибут, в этом случае используйте свойство CSS width вместо него. В других случаях, таких как <canvas>, ширина должна быть задана этим атрибутом.
wrap <textarea> Указывает, следует ли переносить текст.
border <img>, <object>, <table> Ширина границы.Примечание: это устаревший атрибут, используйте свойство CSS border.
buffered <audio>, <video> Содержит отрезок времени уже буферизованного медиа.
charset <meta>, <script> Определяет кодировку страницы или скрипта.
checked <command>, <input> Указывает, следует ли отметить элемент при загрузки страницы.
cite <blockquote>, <del>, <ins>, <q> Содержит URI, который указывает на источник цитаты или изменения.
class Глобальный атрибут Часто используется вместе с CSS, чтобы стилизовать элементы с общими свойствами.
code <applet> Указывает URL файла класса аплета для загрузки и выполнения.
codebase <applet> Этот атрибут предоставляет абсолютный или относительный URL директории, файлы аплета .class, на которые ссылаются в хранимом атрибуте кода.
color <basefont>, <font>, <hr> Этот атрибут устанавливает цвет текста, используя либо название цвета, либо шестнадцатеричный формат #RRGGBB.Примечание: это устаревший атрибут. Используйте CSS-свойство color.
cols <textarea> Определяет количество столбцов в textarea.
colspan <td>, <th> Определяет диапазон количества столбцов ячейки.
content <meta> Значение, ассоциированное с http-equiv или name зависит от контекста.
contenteditable Глобальный атрибут Указывает, редактируется ли содержимое элемента.
contextmenu Глобальный атрибут Определяет ID элемента <menu> который послужит, как контекстное меню элемента.
controls <audio>, <video> Указывает, следует ли отображать пользователю кнопки воспроизведения.
coords <area> Набор значений, задающий координаты области для активного участка.
data <object> Задаёт URL ресурса.
data-* Глобальный атрибут Позволяет прикрепить произвольные атрибуты для HTML-элемента.
datetime <del>, <ins>, <time> Указывает дату и время, ассоциированное с элементом.
default <track> Указывает, что дорожка должна быть доступна, если пользовательские настройки не говорят об обратном.
defer <script> Указывает, что скрипт должен быть запущен, после того как страница будет проанализирована.
dir Глобальный атрибут Определяет направление текста. Допустимые значения ltr (Слева направо) или rtl (Справа налево).
dirname <input>, <textarea>
disabled <button>, <command>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea> Указывает, может ли пользователь взаимодействовать с элементом.
download <a>, <area> Указывает, что ссылка используется для загрузки.
draggable Глобальный атрибут Определяет, можно ли перетаскивать элемент.
dropzone Глобальный атрибут Указывает, что элемент принимает содержимое элемента, которое перетаскивают на него.
enctype <form> Определяет тип содержимого для данных формы, когда method — POST.
for <label>, <output> Описывает элементы, которые принадлежат им.
form <button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> Указывает форму, которая является владельцем элемента.
formaction <input>, <button> Указывает действие элемента, перезаписывающее действие, указанное в форме <form>.
headers <td>, <th> ID элементов <th>, которые применяются к этому элементу.
height <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> Примечание: в некоторых экземплярах, таких как <div>, это устаревший атрибут, в этом случае используйте свойство CSS height. В других экземплярах, таких как <canvas>, высота должна быть задана этим атрибутом.
accept <form>, <input> Список типов, которые принимает сервер, обычно тип файла.
accept-charset <form> Список поддерживаемых наборов символов.
accesskey Глобальный атрибут Определяет клавишную комбинацию для активизации или добавления фокуса к элементу.
action <form> URI адрес программы, которая обработает данные, переданные через форму.
align <applet>, <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot> , <th>, <thead>, <tr> Задаёт горизонтальное выравнивание элемента.
alt <applet>, <area>, <img>, <input> Альтернативный текст, в случае, если изображение не может быть отображено.
async <script> Указывает, что скрипт должен быть выполнен асинхронно.
autocomplete <form>, <input> Показывает, могут ли управляющие элементы в форме по умолчанию иметь собственные значения для автодополнения в форме.
autofocus <button>, <input>, <select>, <textarea> На этом элементе следует автоматически сфокусироваться после загрузки страницы.
autoplay <audio>, <video> Аудио и видео нужно воспроизвести как можно скорее.
autosave <input> Предыдущее значения следует сохранить в выпадающем списке при загрузки страницы.
bgcolor <body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr> Цвет фона элемента.Примечание: это устаревший атрибут. Используйте свойство CSS background-color.

Содержимое в сравнении с IDL атрибутами

В HTML, большинство атрибутов имеют две грани: атрибут содержимого и IDL атрибут.

Атрибут содержимого — это атрибут как вы его устанавливаете из содержимого (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> будет иметь тип text (по виду и по поведению) но значение атрибута содержимого "type" будет "foobar". Однако, IDL-атрибут type возвратит строку "text".

IDL-атрибуты не всегда строки; например, input.maxlength число (long со знаком). Когда используете IDL атрибуты, вы читаете или устанавливаете значения желаемого типа, поэтому input.maxlength всегда намеревается вернуть число и когда вы устанавливаете input.maxlength, это требует число. Если вы передадите другой тип, это автоматически конвертируется в число, по стандартным правилам преобразования типов в JavaScript.

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

Смотрите также