Атрибуты

Мы уже встречали атрибуты: href у ссылки, src и alt у картинки. Атрибут — дополнительная настройка элемента. Одни атрибуты есть только у определённых тегов, другие подходят к любому — их называют глобальными.

Синтаксис

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

<p title="Это подсказка">Наведите курсор на этот абзац.</p>

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

Глобальные атрибуты

id и class

id должен быть единственным на странице: по нему работают якорные ссылки и скрипты. class можно давать многим элементам, а у одного элемента может быть несколько классов через пробел:

<style>
  .note { padding: 8px; background: #eef; }
  .warning { background: #fee; color: #900; }
</style>
 
<p id="intro">Вступление — у него уникальный id.</p>
<p class="note">Обычная заметка.</p>
<p class="note warning">Заметка с двумя классами.</p>

Третий абзац получил стили обоих классов: отступ от note и красный цвет от warning.

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

Некоторым атрибутам значение не нужно — важно лишь, есть они или нет. Такие атрибуты называют логическими:

<p>Видимый абзац.</p>
<p hidden>Этот абзац скрыт атрибутом hidden.</p>
<ol reversed>
  <li>Два</li>
  <li>Один</li>
</ol>

Запись hidden="false" не отменяет скрытия: атрибут всё равно присутствует. Чтобы показать элемент, атрибут убирают совсем.

Атрибуты lang и style

lang меняет язык для части страницы, style задаёт оформление одному элементу:

<p>Французы говорят <span lang="fr">bon appétit</span> перед едой.</p>
<p style="color: teal; font-size: 20px;">Крупный бирюзовый текст.</p>

style удобен для быстрых проб, но обычно стили пишут в CSS-файле — так их проще менять сразу на всём сайте.

Свои данные: data-атрибуты

Атрибуты, которые начинаются с data-, можно придумывать самим. Браузер их не трогает, а скрипты и CSS могут их прочитать:

<style>
  [data-status="sold"] { color: gray; text-decoration: line-through; }
</style>
 
<ul>
  <li data-status="available">Синий свитер</li>
  <li data-status="sold">Красный свитер</li>
</ul>

CSS нашёл элемент по значению data-status и зачеркнул проданный товар.

Частая ошибка

Два элемента с одинаковым id — ошибка: ссылка #имя и скрипты найдут только первый. Если оформление нужно повторить, используйте class. И помните, что пробел в class разделяет классы: class="main title" — это два класса, main и title, а не один.