Атрибуты элементов

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

Атрибут со значением

Вначале пишется открывающий тег, затем через пробел имя атрибута, после чего ставится знак равно (=) и в кавычках указывается значение атрибута. Общий синтаксис такой:

<E атрибут="значение">…</E>

Здесь буквой E обозначается название произвольного элемента. Для самозакрывающих элементов всё будет аналогично, кроме содержимого и закрывающего тега.

<E атрибут="значение">

Вместо двойных кавычек ("значение") можно писать одинарные кавычки ('значение') или вообще опустить кавычки (значение). Однако хорошим тоном будет всегда писать значения атрибутов в кавычках, потому что их отсутствие может привести к неявным ошибкам. Приведём небольшой пример.

<p><img src="arena.png" alt="Вид заголовка"></p>
<p><img src="arena.png" alt=Вид заголовка></p>

В данном примере первая строка написана правильно со всеми кавычками, а в следующей строке у атрибута alt кавычки отсутствуют. Поскольку пробел отделяет один атрибут от другого, то браузер в качестве значения alt возьмёт только первое слово («Вид»), а слово «заголовка» будет воспринимать как новый атрибут. Но так как подобного атрибута не существует, то это приведёт к ошибке.

Каждый атрибут должен быть единственным и не должен повторяться (alt писать можно, alt alt нельзя).

В примере 1 показано добавление картинки на страницу с помощью элемента <img> с разными атрибутами.

Пример 1. Использование атрибутов

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Добавление картинки</title>
 </head>
 <body>
  <p><img src="image/sun.png" alt="Солнышко" width="196" height="183"></p>
 </body>
</html>

Логические атрибуты

У логических атрибутов нет значений, само наличие или отсутствие атрибута уже меняет поведение элемента. Синтаксис достаточно простой:

<E атрибут>…</E>

В примере 2 показано применение логического атрибута для аудиоплеера.

Пример 2. Использование логического атрибута

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Добавление аудио</title>
 </head>
 <body>
  <audio src="audio/music.mp3" controls loop autoplay></audio>
 </body>
</html>

Логические атрибуты допустимо записывать в трёх видах: без значения, с пустым значением и значением, совпадающим с именем атрибута. Все варианты равнозначны, но желательно придерживаться одной выбранной формы записи.

controls
controls=""
controls="controls"

Опять же имена атрибутов не чувствительны к регистру, это значит, что их можно писать маленькими или большими буквами. Но рекомендуем придерживаться единообразия и писать атрибуты в нижнем регистре — name. А никак не Name или NAME. Ещё раз подчеркнём, что так писать не надо.

Порядок атрибутов

Порядок атрибутов в элементе не имеет значения и на результат отображения элемента не влияет. Также допустим перенос атрибутов на другую строку. Следующие записи по своему действию равноценны.

<img src="title.png" width="438" height="118" alt=""> 
<img alt="" height="118" width="438" src="title.png">
<img 
  src="title.png" 
  width="438" height="118" 
  alt="">

Универсальные атрибуты

У некоторых элементов есть свой набор характерных атрибутов, но кроме этого существуют атрибуты, которые можно добавлять к любому элементу. По этой причине они называются универсальными или глобальными атрибутами. Список всех таких атрибутов вы можете посмотреть здесь, перечислим лишь некоторые популярные: class, id, lang, style, title.

Перейти к заданиям

Автор: Влад Мержевич

Последнее изменение: 03.04.2018