Атрибуты HTML-тегов
В этой главе мы с вами узнаем, что такое атрибуты тегов и зачем они нужны. Итак, атрибуты используются для добавления HTML-элементам новых свойств, изменений уже существующих или передачи элементам специальных, необходимых им для работы, инструкций. Каждый тег содержит свой, персональный набор атрибутов. В общем случае их указание происходит следующим образом:
В первой строке показаны атрибуты парного тега, во второй — пустого. Указывать их можно только внутри открывающих тегов и если атрибутов несколько, то между ними ставится пробел. При этом нельзя в одном теге задавать два одинаковых атрибута, даже если у них разные значения, то есть дублировать их запрещено. Атрибуты, как и теги, нечувствительны к регистру, то есть их допустимо писать заглавными и строчными буквами. Значения атрибутов можно брать в необязательные двойные кавычки (" ").
Совет. Как и в случае с тегами, рекомендую вам всегда писать атрибуты в нижнем регистре и брать их значения в кавычки. Но не переживайте — во всех примерах учебника данные правила будут строго соблюдаться, так что еще привыкнете.
Пример правильного использования атрибутов тегов
<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-документа |