HTML-атрибуты
HTML-атрибуты используются внутри открывающего тега. Они предоставляют дополнительную информацию об HTML-элементах. Атрибут задаёт метаданные для элемента или изменяет его поведение. Атрибут имеет имя, за которым следует знак равенства (=) и значение, заключённое в кавычки ("").
Синтаксис
Синтаксис HTML-атрибутов
html
<tag attribute="value">Your Text</tag>Атрибут href
Тег HTML <a> создаёт ссылку, адрес которой задаётся в атрибуте href. В примере ниже мы использовали тег <a> с атрибутом href. Между кавычками мы указали адрес страницы, на которую перейдём после нажатия на ссылку.
Пример тега HTML <a> с атрибутом href:
Пример атрибута
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com">Click here and go to the homepage.</a>
</body>
</html>Результат
Атрибут id
Атрибут id в HTML задаёт уникальный идентификатор для каждого элемента.
Пример тега HTML <div> с атрибутом id:
Пример тега div с атрибутом "id"
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#text {
font-family: sans-serif;
font-size: 20px;
line-height: 28px;
color: #777777;
}
</style>
</head>
<body>
<h2>Example of the div tag with the "id" attribute</h2>
<div id="text">Here is some text for the div tag with the "id" attribute.</div>
</body>
</html>Атрибут style
Атрибут style задаёт оформление элемента, например цвет, размер, шрифт и так далее.
Пример тега HTML <p> с атрибутом style:
Пример тега p с атрибутом "style":
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Example of the p tag with the style attribute</h2>
<p style="color:#666666;font-size:18px;">Here is some text for the p tag with the "style" attribute.</p>
</body>
</html>Атрибут start
Атрибут start задаёт начальное значение первого элемента списка в нумерованном списке.
Пример тега HTML <ol> с атрибутом start:
Пример тега ol с атрибутом "start"
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the ol tag with the "start" attribute:</h1>
<ol>
<li>List Item</li>
<li>List Item </li>
<li>List Item </li>
</ol>
<ol start="30">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ol>
</body>
</html>Несколько атрибутов
Вы можете добавить к HTML-элементу более одного атрибута. Обязательно ставьте между ними пробел.
Не имеет значения, в какой последовательности расположены атрибуты.
Синтаксис
Пример HTML-атрибутов
html
<tag attribute1="value" attribute2="value">Your text</tag>Пример тега HTML <img> с атрибутами src, width, height и alt:
Пример тега HTML img с несколькими атрибутами
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Heading</h1>
<p>This is Aleq's photo</p>
<img src="https://ru.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>Атрибуты Content и IDL
В HTML есть две группы атрибутов: content-атрибут и IDL-атрибут (Interface Definition Language).
Content-атрибут задаётся из содержимого (HTML-кода), и получить его можно через element.setAttribute() или element.getAttribute(). Некоторые content-атрибуты, такие как readonly, disabled, required, также называются логическими атрибутами. Значение логического атрибута равно true, если он присутствует, и false, если он отсутствует.
IDL-атрибуты — это те, которые можно читать или задавать с помощью свойств JavaScript, например element.foo. IDL-атрибуты отражают content-атрибуты. Они всегда используют content-атрибут и возвращают значение при чтении, сохраняя что-то в content-атрибуте при установке.
Список наиболее часто используемых HTML-атрибутов:
| Атрибут | Описание | Пример |
|---|---|---|
| alt | Определяет альтернативный текст, когда исходный элемент не отображается. | alt="HTML Attributes" |
| height | Определяет высоту элемента. | height="250" |
| href | Определяет URL ссылки. | href="https://www.w3docs.com/" |
| hreflang | Определяет язык связанного документа. | hreflang="en" |
| id | Определяет уникальный id HTML-элемента. | id="example" |
| lang | Определяет язык документа (используется в теге <html>). | <html lang="en-US"> |
| rel | Определяет отношение между целевым и связанным документами. | rel="nofollow" |
| shape | Определяет форму элемента. | shape="circle" |
| span | Определяет количество столбцов, занимаемых элементом <col> или <colgroup>. | span="2" |
| src | Определяет источник элемента. | src="https://example.com/image.jpg" |
| start | Задаёт начальное значение нумерованного списка (используется в теге <ol>). | <ol start="30"> |
| style | Задаёт CSS-стиль HTML-элемента (размер, шрифт, цвет и т. д.). | style="color:red;text-align:right" |
| target | Определяет, где открыть ссылку. | target="_blank" |
| wrap | Определяет, должен ли текст переноситься. | wrap="hard" |
| width | Определяет ширину элемента. | width="120" |
См. также список глобальных HTML-атрибутов, которые можно использовать с любым HTML-элементом.
Полный список 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 | <textarea>, <input> | Определяет, что направление текста будет отправлено. |
| disabled | <button>, <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>, <select>, <textarea> | Определяет имя формы, к которой принадлежит элемент. |
| formaction | <button>, <input> | Определяет, куда отправлять данные формы при её отправке. Этот атрибут используется только для type="submit". |
| headers | <th>, <th> | Определяет одну или несколько ячеек заголовка, с которыми связана ячейка. |
| height | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> | Определяет высоту элемента. |
| hidden | Глобальные атрибуты | Определяет, что элемент не является значимым. |
| high | <meter> | Определяет верхнюю границу диапазона, представленного элементом <meter>. |
| href | <a>, <area>, <base>, <link> | Определяет URL страницы, на которую ведёт ссылка. |
| hreflang | <a>, <area>, <link> | Определяет язык связанного документа. |
| http-equiv | <meta> | Даёт атрибуту content HTTP-заголовок для информации или значения. |
| id | Глобальные атрибуты | Определяет уникальный id для элемента. |
| 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> | Скрипт, который выполняется после печати документа. |
| onbeforeunload | <body> | Скрипт, который выполняется, когда документ собираются выгрузить. |
| onblur | Все видимые элементы. | Скрипт, который выполняется, когда элемент теряет фокус. |
| oncanplay | <audio>, <embed>, <object>, <video> | Скрипт, который выполняется, когда файл готов к воспроизведению. |
| oncanplaythrough | <audio>, <video> | Скрипт, который выполняется, когда файл можно воспроизвести до конца без паузы на буферизацию. |
| onchange | Все видимые элементы. | Скрипт, который выполняется при изменении значения элемента. |
| onclick | Все видимые элементы. | Скрипт, который выполняется при нажатии на элемент. |
| oncontextmenu | Все видимые элементы. | Скрипт, который выполняется при вызове контекстного меню. |
| oncopy | Все видимые элементы. | Скрипт, который выполняется при копировании содержимого элемента. |
| oncuechange | <track> | Скрипт, который выполняется при изменении cue в элементе <track>. |
| oncut | Все видимые элементы. | Скрипт, который выполняется при вырезании содержимого элемента. |
| ondblclick | Все видимые элементы. | Скрипт, который выполняется при двойном щелчке по элементу. |
| ondrag | Все видимые элементы. | Скрипт, который выполняется при перетаскивании элемента. |
| ondragend | Все видимые элементы. | Скрипт, который выполняется в конце операции перетаскивания. |
| ondragenter | Все видимые элементы. | Скрипт, который выполняется, когда элемент перетащили на допустимую область сброса. |
| ondragleave | Все видимые элементы. | Скрипт, который выполняется, когда элемент покидает допустимую область сброса. |
| ondragover | Все видимые элементы. | Скрипт, который выполняется, когда элемент перетаскивают над допустимой областью сброса. |
| ondragstart | Все видимые элементы. | Скрипт, который выполняется в начале операции перетаскивания. |
| ondrop | Все видимые элементы. | Скрипт, который выполняется в начале операции перетаскивания. |
| ondurationchange | <audio>, <video> | Скрипт, который выполняется при изменении длительности медиа. |
| onemptied | <audio>, <video> | Скрипт, который выполняется, когда происходит что-то неожиданное и файл становится недоступным. |
| onended | <audio>, <video> | Скрипт, который выполняется, когда медиа достигает конца. |
| onerror | <audio>, <video>, <embed>, <object>, <script>, <style>, <body> | Скрипт, который выполняется при возникновении ошибки. |
| onfocus | Все видимые элементы. | Скрипт, который выполняется, когда элемент получает фокус. |
| onhashchange | <body> | Скрипт, который выполняется при изменении якоря. |
| oninput | Все видимые элементы. | Скрипт, который выполняется, когда элемент получает ввод от пользователя. |
| oninvalid | Все видимые элементы. | Скрипт, который выполняется, когда элемент недействителен. |
| onkeydown | Все видимые элементы. | Скрипт, который выполняется, когда пользователь нажимает клавишу. |
| onkeypress | Все видимые элементы. | Скрипт, который выполняется, когда пользователь нажимает клавишу. |
| onkeyup | Все видимые элементы. | Скрипт, который выполняется, когда пользователь отпускает клавишу. |
| onload | <body>, <iframe>, <input>, <img>, <script>, <style>, <link> | Скрипт, который выполняется после завершения загрузки. |
| onloadeddata | <audio>, <video> | Скрипт, который выполняется при загрузке данных медиа. |
| onloadedmetadata | <audio>, <video> | Скрипт, который выполняется при загрузке метаданных. |
| onloadstart | <audio>, <video> | Скрипт, который выполняется, когда файл начинает загружаться, ещё до того, как что-либо фактически загружено. |
| onmousedown | Все видимые элементы. | Скрипт, который выполняется, когда кнопка мыши нажимается на элемент. |
| onmousemove | Все видимые элементы. | Скрипт, который выполняется по мере перемещения указателя мыши над элементом. |
| onmouseout | Все видимые элементы. | Скрипт, который выполняется, когда указатель мыши покидает элемент. |
| onmouseup | Все видимые элементы. | Скрипт, который выполняется, когда кнопка мыши отпускается над элементом. |
| onmouseover | Все видимые элементы. | Скрипт, который выполняется, когда указатель мыши перемещается над элементом. |
| 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> | Скрипт, который выполняется, когда пользователь вводит что-то в поле поиска. |
| onseeked | <audio>, <video> | Скрипт, который выполняется, когда атрибут seeking установлен в false, указывая, что перемотка завершена. |
| onseeking | <audio>, <video> | Скрипт, который выполняется, когда атрибут seeking установлен в true и указывает, что перемотка активна. |
| onselect | Все видимые элементы. | Скрипт, который выполняется, когда элемент выбран. |
| onstalled | <audio>, <video> | Скрипт, который выполняется, когда браузер не может получить данные медиа по некоторым причинам. |
| onstorage | <body> | Скрипт, который выполняется при обновлении области Web Storage. |
| onsubmit | <form> | Скрипт, который выполняется при отправке формы. |
| onsuspend | <audio>, <video> | Скрипт, который выполняется, когда получение данных медиа останавливается до полной загрузки. |
| ontimeupdate | <audio>, <video> | Скрипт, который выполняется при изменении позиции воспроизведения. |
| ontoggle | <details> | Скрипт, который выполняется, когда элемент <details> открывается или закрывается. |
| onunload | <body> | Скрипт, который выполняется при выгрузке страницы. |
| onvolumechange | <audio>, <video> | Скрипт, который выполняется каждый раз при изменении громкости видео или аудио. |
| onwaiting | <audio>, <video> | Скрипт, который выполняется, когда медиа приостановлено, но при этом ожидается продолжение. |
| onwheel | Все видимые элементы. | Скрипт, который выполняется, когда колесо мыши прокручивается вверх или вниз над элементом. |
| open | <details> | Определяет, что сведения должны быть видимыми. |
| optimum | <meter> | Определяет, какое значение является оптимальным для индикатора. |
| pattern | <input> | Определяет регулярное выражение, с которым проверяется значение элемента <input>. |
| placeholder | <input>, <textarea> | Определяет краткую подсказку, описывающую ожидаемое значение элемента. |
| poster | <video> | Определяет изображение, которое будет показано во время загрузки видео или до нажатия пользователем кнопки воспроизведения. |
| preload | <audio>, <video> | Определяет, нужно ли загружать аудио или видео и каким образом при загрузке страницы. |
| readonly | <input>, <textarea> | Определяет, что элемент доступен только для чтения. |
| rel | <a>, <area>, <link> | Определяет отношение между текущим и связанным документами. |
| required | <input>, <textarea>, <select> | Определяет, что элемент должен быть заполнен перед отправкой формы. |
| reversed | <ol> | Определяет, что порядок списка должен быть убывающим. Например 5,4,3... |
| rows | <textarea> | Определяет видимое количество строк в текстовой области. |
| rowspan | <td>, <th> | Определяет количество строк, которые должна занимать ячейка таблицы. |
| sandbox | <iframe> | Включает дополнительный набор ограничений для содержимого внутри элемента <iframe>. |
| scope | <th> | Определяет, является ли ячейка заголовка заголовком для столбца, строки или группы столбцов или строк. |
| selected | <option> | Определяет, что параметр должен быть предварительно выбран при загрузке страницы. |
| shape | <area> | Определяет форму области. |
| size | <input>, <select>, <embed>, <iframe> | Определяет ширину в символах (для <input>) или количество видимых параметров (для <select>). |
| sizes | <link>, <img>, <source> | Определяет размер связанного ресурса. |
| span | <col>, <colgroup> | Определяет количество столбцов, которые нужно охватить. |
| spellcheck | Глобальные атрибуты | Определяет, следует ли проверять грамматику и орфографию элемента. |
| src | <img>, <source>, <audio>, <video>, <script>, <track>, <embed>, <iframe> | Определяет URL медиафайла. |
| srcdoc | <iframe> | Определяет HTML-содержимое страницы, которое должно отображаться в элементе <iframe>. |
| srclang | <track> | Определяет язык текстовых данных дорожки. |
| srcset | <img>, <source> | Определяет URL изображения, которое можно использовать в разных ситуациях. |
| start | <ol> | Определяет начальное значение нумерованного списка. |
| step | <input> | Определяет допустимые интервалы чисел для поля ввода. |
| style | Глобальные атрибуты | Определяет встроенный CSS-стиль для элемента. |
| tabindex | Глобальные атрибуты | Определяет порядок перехода по элементам с помощью клавиши Tab. |
| target | <a>, <area>, <base>, <form> | Определяет цель, где должен быть открыт связанный документ или куда должна быть отправлена форма. |
| title | Глобальные атрибуты | Определяет дополнительную информацию об элементе. |
| translate | Глобальные атрибуты | Определяет, должен ли текстовый контент элемента переводиться браузером или инструментами перевода. |
| type | <embed>, <input>, <object>, <a>, <button>, <link>, <menu>, <object>, <script>, <source>, <style> | Определяет тип элемента. |
| usemap | <object>, <img> | Определяет изображение как клиентскую карту-изображение. |
| value | <button>, <input>, <li>, <option>, <meter>, <progress>, <param> | Определяет значение элемента. |
| width | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> | Определяет ширину элемента. |
| wrap | <textarea> | Определяет, как должен переноситься текст в текстовой области при отправке формы. |
См. также список глобальных HTML-атрибутов, которые можно использовать с любым HTML-элементом.
Практика
Какие из следующих утверждений об HTML-атрибутах верны?