Атрибуты определяют дополнительные характеристики или свойства элемента, например ширину и высоту изображения. Атрибуты всегда указываются в начальном теге (или открывающем) и обычно состоят из пар имя=значение, например 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.

Похожие посты

Руководство по тегам и элементам в HTML

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа. Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет…

Руководство по заголовкам в HTML

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…

Руководство по мета-тегам в HTML

Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д. В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами. Теперь рассмотрим использование мета-тегов. Объявление кодировки…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.