Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

Атрибуты HTML-тегов

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

<тег1 атрибут1="значение" атрибут2="значение">...</тег1>
<тег2 атрибут1="значение">

В первой строке показаны атрибуты парного тега, во второй — пустого. Указывать их можно только внутри открывающих тегов и если атрибутов несколько, то между ними ставится пробел. При этом нельзя в одном теге задавать два одинаковых атрибута, даже если у них разные значения, то есть дублировать их запрещено. Атрибуты, как и теги, нечувствительны к регистру, то есть их допустимо писать заглавными и строчными буквами. Значения атрибутов можно брать в необязательные двойные кавычки (" ").

Совет. Как и в случае с тегами, рекомендую вам всегда писать атрибуты в нижнем регистре и брать их значения в кавычки. Но не переживайте — во всех примерах учебника данные правила будут строго соблюдаться, так что еще привыкнете.

Пример правильного использования атрибутов тегов

<span style="color:green">Зеленый текст</span>
<span style="color:red">Красный текст</span>

Результат в браузере

Зеленый текст Красный текст

В этом примере происходит изменение цвета текста внутри тегов. А вот в следующем примере присутствует ошибка, так как внутри одного тега находится два одинаковых атрибута style.

Пример неправильного использования атрибутов тегов

<span style="color:green" style="color:red">НЕПРАВИЛЬНО</span>

Всегда будьте внимательны при написании тегов, атрибутов и, особенно, их значений, так как неправильно написанные параметры браузеры просто проигнорируют. Если вы используете HTML-редакторы с подсветкой синтаксиса, то они всегда вам покажут неправильно написанный тег или атрибут, чего не скажешь про значения атрибутов. Дело в том, что значения могут быть абсолютно разными (например, размеры изображений), поэтому их синтаксис очень трудно отследить программно.

Атрибуты можно указывать в одну строку, а можно в несколько

Да, атрибуты, как и теги, можно указывать в одну или несколько строк. В следующем примере показан один и тот же, но написанный по-разному, тег.

Пример переноса строк внутри тега

<img src="images/image.png" width="100" height="80" alt="Атрибуты тегов">

<img src="images/image.png"
width="100" height="80"
alt="Атрибуты тегов">

Как видите, если указание тегов на разных строках повышает удобочитаемость HTML-кода, то подобное указание атрибутов его часто снижает. Хотя, на вкус и цвет, как говорится...

Порядок указания атрибутов тегов

Атрибуты тегов можно указывать абсолютно в любой последовательности, поэтому пишите их так, как вам удобней. В следующем примере оба варианта верны.

Пример указания атрибутов в разном порядке

<img src="images/image.png" width="100" height="80" alt="Атрибуты тегов">
<img width="100" src="images/image.png" alt="Атрибуты тегов" height="80">

Значения по умолчанию, обязательные атрибуты

Многие теги уже изначально имеют определенные значения своих атрибутов, поэтому, если вы не хотите их менять, то и атрибуты можно не указывать в принципе. Главное — следите и не забывайте о том, что существуют обязательные атрибуты тегов, которые необходимо проставлять всегда. Ну, об этом мы еще будем говорить с вами в дальнейших уроках.

На этом теоретическая часть учебника заканчивается и дальше будет самое интересное — практика и только практика, так что вперед!

Теги и синтаксис HTML← Содержание →Структура HTML-документа