Атрибуты id и class

Знакомимся с двумя универсальными атрибутами-«ярлыками» и с делением элементов на блочные и строчные.

class — метка для группы элементов (можно повторять), id — уникальное имя одного элемента (на странице один раз).

Зачем нужны id и class

Эти атрибуты сами по себе ничего не меняют во внешнем виде. Это ярлыки, по которым к элементу потом обращаются: CSS — чтобы его оформить, JavaScript — чтобы им управлять. Без ярлыков было бы непонятно, к какому именно из десятков абзацев применить стиль.

class — для групп

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

<p class="important">Первый важный абзац</p>
<p class="important">Второй важный абзац</p>

Теперь в CSS можно одним правилом оформить все элементы с классом important сразу.

id — для уникального элемента

Атрибут id — это уникальное имя. На странице каждое значение id должно встречаться только один раз:

<div id="header">Шапка сайта</div>

Вы уже встречали id в уроке про ссылки-якоря (href="#header") и в формах (связь label с полем). Это и есть его типичные применения.

id и class рядом

	class	id
Повторяемость	у многих элементов	уникален на странице
Сколько на элементе	несколько через пробел	один
Назначение	группы для стилей	конкретный элемент, якоря

Блочные и строчные элементы

Все элементы делятся на две группы по поведению:

Блочные занимают всю ширину и начинаются с новой строки. Это <p>, <h1>, <div>, списки, таблицы.
Строчные занимают только ширину содержимого и встают в строку рядом с текстом. Это <a>, <strong>, <img>.

Два универсальных контейнера без собственного смысла: <div> — блочный, оборачивает крупные части; и строчный — оборачивает кусочек текста внутри строки. Их берут, когда нужно сгруппировать что-то ради стилей, а подходящего семантического тега нет.

Как класс связывается со стилями

Чтобы было понятно, зачем вообще нужны эти ярлыки, заглянем чуть вперёд — в CSS. Когда вы повесили на абзацы класс important, в стилях можно одним правилом обратиться ко всем таким абзацам сразу: «у всех элементов с классом important сделать текст красным». Точкой перед именем CSS обозначает класс:

.important {
  color: red;
}

Это и есть смысл связки. HTML расставляет ярлыки (class, id), а CSS по этим ярлыкам находит нужные элементы и оформляет их. Детально синтаксис CSS вы изучите в следующем курсе — здесь важно лишь понять идею: class и id существуют ради того, чтобы за элемент можно было «зацепиться» снаружи.

Итог

class — метка для группы элементов (повторяется), id — уникальное имя одного элемента.
Эти атрибуты — «ярлыки» для связи со стилями CSS и скриптами; на вид они не влияют.
Элементы бывают блочные (с новой строки, на всю ширину) и строчные (в строке, по содержимому).