Одной из ключевых концепций 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-*
и другие. Глобальные атрибуты позволяют добавлять дополнительную информацию к элементам страницы независимо от их типа.
Атрибут | Отношение | Описание |
---|---|---|
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 играют важную роль в создании динамичных и информативных веб-страниц. Понимание различных типов атрибутов поможет вам эффективно управлять своим контентом, стилями и интерактивными элементами. Используйте атрибуты сообразно для создания красивых и функциональных веб-страниц.