Справочник по HTML атрибутам, список HTML атрибутов
Меню
Веб-разработка

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

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


Что такое атрибуты в HTML?

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


Типы HTML атрибутов

Атрибуты в HTML можно разделить на две основные категории: атрибуты без значения и атрибуты с значениями.

Атрибуты без значений

Атрибуты без значений предоставляют дополнительную информацию об элементе, но не требуют значения. Некоторые из наиболее распространенных атрибутов без значений в HTML включают disabled, readonly, required, checked, selected и другие. Например, атрибут disabled используется для отключения элемента формы.

Атрибуты со значениями

Атрибуты с значениями позволяют задавать конкретное значение для атрибута. Эти значения могут быть текстовыми, числовыми, ссылками и т.д. Некоторые распространенные атрибуты с значениями в HTML включают src, href, alt, class, id, width, height и др. Например, атрибут src указывает путь к изображению, которое будет отображаться на веб-странице.

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

Существуют также глобальные атрибуты, которые можно использовать с любым элементом в HTML. Эти атрибуты включают class, id, style, title, data-* и другие. Глобальные атрибуты позволяют добавлять дополнительную информацию к элементам страницы независимо от их типа.


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

Атрибут Отношение Описание
accept <input> Указывает типы файлов, которые принимает сервер (только для type="file")
accept-charset <form> Указывает кодировки символов, которые будут использоваться при отправке формы
accesskey Глобальные атрибуты Указывает сочетание клавиш для активации/фокусировки элемента
action <form> Указывает, куда отправлять данные формы при ее отправке
align Не поддерживается в HTML5 Задает выравнивание в соответствии с окружающими элементами. Используйте CSS вместо этого
alt <area><img><input> Указывает альтернативный текст, если исходный элемент не отображается
async <script> Указывает, что скрипт выполняется асинхронно (только для внешних скриптов)
autocomplete <form><input> Указывает, следует ли включить автозаполнение для элемента <form> или <input>
autofocus <button><input><select><textarea> Указывает, что элемент должен автоматически получать фокус при загрузке страницы
autoplay <audio><video> Указывает, что воспроизведение аудио/видео начнется сразу после его готовности
bgcolor  Не поддерживается в HTML5 Задает цвет фона элемента. Используйте CSS вместо этого
border Не поддерживается в HTML5 Задает ширину границы элемента. Используйте CSS вместо этого
charset <meta><script> Указывает кодировку символов
checked <input> Указывает, что элемент <input> должен быть предварительно выбран при загрузке страницы (для type="checkbox" или type="radio")
cite <blockquote><del><ins>, <q> Указывает URL, который поясняет цитату/удаленный/вставленный текст
class Глобальные атрибуты Указывает одно или несколько имен классов для элемента (относится к классу в таблице стилей)
color Не поддерживается в HTML5 Задает цвет текста элемента. Используйте CSS вместо этого
cols <textarea> Задает видимую ширину текстовой области
colspan <td><th> Указывает количество столбцов, которые должна охватывать ячейка таблицы
content <meta> Выдает значение, связанное с атрибутом http-equiv или name
contenteditable Глобальные атрибуты Указывает, можно ли редактировать содержимое элемента
controls <audio><video> Указывает, что должны отображаться элементы управления аудио/видео (например, кнопка воспроизведения/паузы и т. д.)
coords <area> Указывает координаты области
data <object> Указывает URL-адрес ресурса, который будет использоваться объектом
data-* Глобальные атрибуты Используется для хранения пользовательских данных, принадлежащих только странице или приложению
datetime <del><ins><time> Указывает дату и время
default <track> Указывает, что трек должен быть включен, если предпочтения пользователя не указывают на то, что другой трек был бы более подходящим
defer <script> Указывает, что скрипт будет выполнен после завершения анализа страницы (только для внешних скриптов)
dir Глобальные атрибуты Задает направление текста для содержимого элемента
dirname <input>, <textarea> Указывает, что направление текста будет отправлено
disabled <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea> Указывает, что указанный элемент/группа элементов должны быть отключены
download <a><area> Указывает, что цель будет загружена, когда пользователь нажмет на гиперссылку
draggable Глобальные атрибуты Указывает, можно ли перетаскивать элемент или нет
enctype <form> Указывает, как должны быть закодированы данные формы при отправке их на сервер (только для method="post")
enterkeyhint Глобальные атрибуты Задает текст клавиши Enter на виртуальной клавиатуре
for <label>, <output> Указывает, к какому элементу(ам) формы привязана метка/вычисление
form  <button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <select>, <textarea> Указывает имя формы, к которой принадлежит элемент
formaction <button><input> Указывает, куда отправлять данные формы при отправке формы. Только для type="submit"
headers  <td><th> Указывает одну или несколько ячеек заголовков, с которыми связана ячейка
height <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> Задает высоту элемента
hidden Глобальные атрибуты Указывает, что элемент еще не является или больше не является релевантным
high <meter> Указывает диапазон, который считается высоким значением
href <a><area>, <base>, <link> Указывает URL-адрес страницы, на которую ведет ссылка
hreflang <a><area>, <link> Указывает язык связанного документа
http-equiv <meta> Предоставляет HTTP-заголовок для информации/значения атрибута контента
id Глобальные атрибуты Указывает уникальный идентификатор элемента
inert Глобальные атрибуты Указывает, что браузер должен игнорировать этот раздел
inputmode Глобальные атрибуты Задает режим виртуальной клавиатуры
ismap <img> Указывает изображение как карту изображений на стороне сервера
kind <track> Указывает тип текстовой дорожки
label <track><option><optgroup> Указывает название текстовой дорожки
lang Глобальные атрибуты Указывает язык содержимого элемента
list <input> Относится к элементу <datalist>, который содержит предопределенные параметры для элемента <input>
loop <audio><video> Указывает, что аудио/видео будет воспроизводиться заново каждый раз после его завершения
low <meter> Указывает диапазон, который считается низким значением
max <input>, <meter>, <progress> Указывает максимальное значение
maxlength <input>, <textarea> Указывает максимально допустимое количество символов в элементе
media <a>, <area>, <link>, <source>, <style> Указывает, для какого носителя/устройства оптимизирован связанный документ
method <form> Указывает метод HTTP, используемый при отправке данных формы
min <input>, <meter> Указывает минимальное значение
multiple <input>, <select> Указывает, что пользователь может ввести более одного значения
muted <audio><video> Указывает, что аудиовыход видео должен быть отключен
name <button>, <fieldset>, <form>, <iframe>,
<input>, <map>, <meta>, <object>,
<output>, <param>, <select>, <textarea>
Указывает имя элемента
novalidate <form> Указывает, что форма не должна проверяться при отправке
onabort <audio>, <embed>, <img>, <object>, <video> Скрипт, запускаемый при прерывании
onafterprint <body> Скрипт, который будет запущен после печати документа
onbeforeprint <body> Скрипт, который необходимо запустить перед печатью документа
onbeforeunload <body> Скрипт, который будет запущен перед выгрузкой документа
onblur Все видимые элементы Скрипт, который будет запущен, когда элемент потеряет фокус
oncanplay <audio>, <embed>, <object>, <video> Скрипт, который будет запущен, когда файл готов к воспроизведению (когда он достаточно буферизован для начала)
oncanplaythrough <audio><video> Скрипт, который будет запущен, когда файл может быть воспроизведен до конца без остановки на буферизацию
onchange Все видимые элементы Скрипт, запускаемый при изменении значения элемента
onclick Все видимые элементы Скрипт, запускаемый при клике по элементу
oncontextmenu Все видимые элементы Скрипт, запускаемый при вызове контекстного меню
oncopy Все видимые элементы Скрипт, запускаемый при копировании содержимого элемента
oncuechange <track> Скрипт, запускаемый при изменении реплики в элементе <track>
oncut Все видимые элементы Скрипт, который будет запущен при вырезании содержимого элемента
ondblclick Все видимые элементы Скрипт, запускаемый при двойном клике по элементу
ondrag Все видимые элементы Скрипт, запускаемый при перетаскивании элемента
ondragend Все видимые элементы Скрипт, запускаемый в конце операции перетаскивания
ondragenter Все видимые элементы Скрипт, который будет запущен, когда элемент перенесен в допустимую цель перетаскивания
ondragleave Все видимые элементы Скрипт, который будет запущен, когда элемент покидает допустимую цель перетаскивания
ondragover Все видимые элементы Скрипт, запускаемый при перетаскивании элемента через допустимую цель перетаскивания
ondragstart Все видимые элементы Скрипт, запускаемый в начале операции перетаскивания
ondrop Все видимые элементы Скрипт, запускаемый при отпускании перетаскиваемого элемента
ondurationchange <audio><video> Скрипт, запускаемый при изменении длины носителя
onemptied <audio><video> Скрипт, запускаемый в случае возникновения неполадок и внезапной недоступности файла (например, неожиданного отключения)
onended <audio><video> Скрипт, который будет запущен, когда медиа-данные закончатся (полезное событие для сообщений типа "спасибо за прослушивание")
onerror <audio>, <body>, <embed>, <img>, <object><script><style>, <video> Скрипт, запускаемый при возникновении ошибки
onfocus Все видимые элементы Скрипт, который будет запущен, когда элемент получит фокус
onhashchange <body> Скрипт, который будет запущен при изменении якорной части URL-адреса
oninput Все видимые элементы Скрипт, который будет запущен, когда элемент получит пользовательский ввод
oninvalid Все видимые элементы Скрипт, который будет запущен, если элемент недействителен
onkeydown Все видимые элементы Скрипт, запускаемый при нажатии пользователем клавиши
onkeypress Все видимые элементы Скрипт, запускаемый при нажатии пользователем клавиши
onkeyup Все видимые элементы Скрипт, запускаемый при отпускании пользователем клавиши
onload <body>, <iframe>, <img>, <input>,
<link>, <script>, <style>
Скрипт, который будет запущен после завершения загрузки элемента
onloadeddata <audio><video> Скрипт, запускаемый при загрузке медиаданных
onloadedmetadata <audio><video> Скрипт, запускаемый при загрузке метаданных (таких как размеры и продолжительность)
onloadstart <audio><video> Скрипт должен быть запущен сразу после начала загрузки файла, до того, как что-либо будет фактически загружено
onmousedown Все видимые элементы Скрипт, запускаемый при нажатии кнопки мыши на элементе
onmousemove Все видимые элементы Скрипт будет выполняться до тех пор, пока указатель мыши перемещается над элементом
onmouseout Все видимые элементы Скрипт, запускаемый при выходе указателя мыши за пределы элемента
onmouseover Все видимые элементы Скрипт, запускаемый при наведении указателя мыши на элемент
onmouseup Все видимые элементы Скрипт, запускаемый при отпускании кнопки мыши над элементом
onmousewheel Все видимые элементы Скрипт, запускаемый при прокрутке колеса мыши над элементом
onoffline <body> Скрипт, запускаемый при переходе браузера в автономный режим работы
ononline <body> Скрипт, который будет запущен, когда браузер начнет работать в сети
onpagehide <body> Скрипт, запускаемый при уходе пользователя со страницы
onpageshow <body> Скрипт, запускаемый при переходе пользователя на страницу
onpaste Все видимые элементы Скрипт, который будет запущен, когда пользователь вставит какой-либо контент в элемент
onpause <audio><video> Скрипт, запускаемый при приостановке воспроизведения мультимедиа пользователем или программно
onplay <audio><video> Скрипт, который будет запущен после начала воспроизведения медиафайла
onplaying <audio><video> Скрипт, который будет запущен после начала воспроизведения медиафайла
onpopstate <body> Скрипт, запускаемый при изменении истории окна
onprogress <audio><video> Скрипт, который будет запущен, когда браузер получает медиаданные
onratechange <audio><video> Скрипт, который будет запускаться каждый раз при изменении скорости воспроизведения (например, когда пользователь переключается в режим замедленной или ускоренной перемотки)
onreset <form> Скрипт, запускаемый при нажатии кнопки сброса в форме
onresize <body> Скрипт, запускаемый при изменении размера окна браузера
onscroll Все видимые элементы Скрипт, запускаемый при прокрутке полосы прокрутки элемента
onsearch <input> Скрипт, запускаемый, когда пользователь пишет что-либо в поле поиска (для <input type="search">)
onseeked <audio><video> Скрипт, который будет запущен, когда атрибуту поиска присвоено значение false, что указывает на то, что поиск завершен
onseeking <audio><video> Скрипт, который будет запущен, когда атрибуту поиска присвоено значение true, что указывает на то, что поиск активен
onselect Все видимые элементы Скрипт, который будет запущен при выборе элемента
onstalled <audio><video> Скрипт, который будет запущен, если браузер по какой-либо причине не может получить медиаданные
onstorage <body> Скрипт, запускаемый при обновлении области веб-хранилища
onsubmit <details> Скрипт, запускаемый, когда пользователь открывает или закрывает элемент <details>
onunload <body> Скрипт, запускаемый при выгрузке страницы (или закрытии окна браузера)
onvolumechange <audio><video> Скрипт, который будет запускаться каждый раз при изменении громкости видео/аудио
onwaiting <audio><video> Скрипт, который будет запущен, когда воспроизведение медиа приостановлено, но ожидается его возобновление (например, когда медиа приостановлено для буферизации дополнительных данных)
onwheel Все видимые элементы Скрипт, запускаемый при движении колесика мыши вверх или вниз по элементу
open <details> Указывает, что данные должны быть видны (открыты) пользователю
optimum <meter> Указывает, какое значение является оптимальным для датчика
pattern <input> Указывает регулярное выражение, по которому проверяется значение элемента <input>
popover Глобальные атрибуты Определяет элемент всплывающего окна
popovertarget <button>, <input> Указывает, какой элемент всплывающего окна следует вызвать
popovertargetaction <button>, <input> Указывает, что происходит с элементом всплывающего окна при нажатии кнопки
poster <video> Указывает изображение, которое будет отображаться во время загрузки видео или до тех пор, пока пользователь не нажмет кнопку воспроизведения
preload <audio><video> Указывает, следует ли, по мнению автора, загружать аудио/видео при загрузке страницы
readonly <input>, <textarea> Указывает, что элемент доступен только для чтения
rel <a><area><form><link> Определяет связь между текущим документом и связанным документом
required <input>, <select>, <textarea> Указывает, что элемент должен быть заполнен перед отправкой формы
reversed <ol> Указывает, что порядок списка должен быть убывающим (9,8,7...)
rows <textarea> Указывает видимое количество строк в текстовой области
rowspan <td><th> Указывает количество строк, которые должна охватывать ячейка таблицы
sandbox <iframe> Включает дополнительный набор ограничений для содержимого в <iframe>
scope <th> Указывает, является ли ячейка заголовка заголовком столбца, строки или группы столбцов или строк
selected <option> Указывает, что параметр должен быть предварительно выбран при загрузке страницы
shape <area> Определяет форму области
size <input>, <select> Указывает ширину в символах (для <input>) или указывает количество видимых параметров (для <select>)
sizes <img><link><source> Указывает размер связанного ресурса
span <col><colgroup> Указывает количество охватываемых столбцов
spellcheck Глобальные атрибуты Указывает, следует ли проверять орфографию и грамматику элемента или нет
src <audio>, <embed>, <iframe>, <img>,
<input>, <script>, <source>, <track>,
<video>
Указывает URL-адрес медиа-файла
srcdoc <iframe> Указывает HTML-содержимое страницы, которое будет отображаться в <iframe>
srclang <track> Указывает язык текстовых данных дорожки (обязательно, если kind="subtitles")
srcset <img>, <source> Указывает URL-адрес изображения для использования в различных ситуациях
start <ol> Указывает начальное значение упорядоченного списка
step <input> Указывает допустимые числовые интервалы для поля ввода
style Глобальные атрибуты Задает встроенный стиль CSS для элемента
tabindex Глобальные атрибуты Задает порядок табуляции элемента
target <a>, <area>, <base>, <form> Указывает цель, где открыть связанный документ или куда отправить форму
title Глобальные атрибуты Указывает дополнительную информацию об элементе
translate Глобальные атрибуты Указывает, следует ли переводить содержимое элемента или нет
type <a>, <button>, <embed>, <input>,
<link>, <menu>, <object>, <script>,
<source>, <style>
Указывает тип элемента
usemap <img>, <object> Указывает изображение как клиентскую карту изображений
value <button>, <input>, <li>, <option>,
<meter>, <progress>, <param>
Указывает значение элемента
width <canvas>, <embed>, <iframe>, <img>,
<input>, <object>, <video>
Задает ширину элемента
wrap <textarea> Указывает, как должен переноситься текст в текстовой области при отправке в форме

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


 

Поделиться ссылкой