Атрибуты определяют дополнительные характеристики или свойства элемента, например ширину и высоту изображения. Атрибуты всегда указываются в начальном теге (или открывающем) и обычно состоят из пар имя=значение, например name="value". Значения атрибутов всегда должны быть заключены в кавычки.
Также некоторые атрибуты являются обязательными для определенных элементов. Например, тег <img> должен содержать атрибуты src и alt. Давайте посмотрим на некоторые примеры использования атрибутов:
<img src="images/smiley.png" width="30" height="30" alt="Smiley">
<a href="https://www.google.com/" title="Search Engine">Google</a>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<input type="text" value="John Doe">В приведенном выше примере src внутри тега <img> является атрибутом, а путь к изображению — его значением. Аналогичным образом href внутри тега <a> является атрибутом, а указанная ссылка является его значением и т. д.
Для указания значений атрибутов могут использоваться как одинарные, так и двойные кавычки. Тем не менее, двойные кавычки являются наиболее распространенными. В ситуациях, когда само значение атрибута содержит двойные кавычки, необходимо заключить значение в одинарные кавычки, например, value='John "Williams" Jr.' и наоборот.
В HTML5 есть несколько атрибутов, которые не состоят из пар имя=значение, а состоят только из имени. Такие атрибуты называются булевыми (логическими) атрибутами. Примеры некоторых обычно используемых логических атрибутов: checked, disabled, readonly, required и т.д.
<input type="email" required>
<input type="submit" value="Submit" disabled>
<input type="checkbox" checked>
<input type="text" value="Read only text" readonly>Подробно обо всех этих элементах вы узнаете в следующих главах.
Значения атрибутов обычно нечувствительны к регистру, за исключением определенных значений атрибутов, таких как id и class. Однако Валидатор W3C рекомендует использовать строчные буквы для указания значений атрибутов в их спецификации.
Атрибуты общего назначения
Есть некоторые атрибуты, такие как id, title, class, style и т. д., которые вы можете использовать в большинстве HTML-элементов. Остановимся на них подробнее.
Атрибут id
Атрибут id используется для присвоения уникального имени или идентификатора элементу в документе. Это облегчает выбор элемента с использованием CSS или JavaScript.
<input type="text" id="firstName">
<div id="container">Некоторый контент</div>
<p id="infoText">Это абзац.</p>id должен быть уникальным в пределах одного документа. Нельзя использовать два одинаковых id в одном документе и нельзя присваивать одному элементу два разных id.
Атрибут class
Как и атрибут id, атрибут class используется для идентификации элементов. Но в отличие от id, атрибут class не обязательно должен быть уникальным в документе. Это означает, что вы можете применить один и тот же класс к нескольким элементам в документе, как показано в следующем примере:
<input type="text" class="highlight">
<div class="box highlight">Некоторый контент</div>
<p class="highlight">Это абзац.</p>Поскольку class может быть применен к нескольким элементам, любые CSS-правила, написанные для этого класса, будут применяться ко всем элементам, имеющим этот class.
Атрибут title
Атрибут title используется для предоставления дополнительного объяснительного текста об элементе или его содержимом. Посмотрим следующий пример, чтобы понять, как это работает.
<abbr title="World Wide Web Consortium">W3C</abbr>
<a href="images/kites.jpg" title="Нажмите, чтобы посмотреть увеличенное изображение">
<img src="images/kites-thumb.jpg" alt="kites">
</a>Значение атрибута title (то есть текст заголовка) отображается в виде всплывающей подсказки веб-браузерами, когда пользователь наводит курсор мыши на элемент.
Атрибут style
Атрибут style позволяет указывать правила стилевого CSS-оформления, такие как color (цвет), font (шрифт), border (границы) и т. д. непосредственно внутри элемента. Посмотрим на пример, чтобы увидеть, как это работает:
<p style="color: blue;">Это абзац.</p>
<img src="images/sky.jpg" style="width: 300px;" alt="Cloudy Sky">
<div style="border: 1px solid red;">Некоторый контент</div>Вы узнаете больше о стилизации HTML-элементов в Руководстве по стилям в HTML.
Атрибуты, которые мы обсуждали выше, также называются глобальными атрибутами. Подробнее см. Руководство по глобальным атрибутам в HTML5.
