Теги, элементы и атрибуты

Три слова, без которых дальше никак: тег, элемент, атрибут. Разбираемся раз и навсегда.

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

Что такое тег

Тег — это служебное слово в угловых скобках. Большинство тегов ходят парами: открывающий и закрывающий. Закрывающий отличается косой чертой:

<p>Текст абзаца</p>

Здесь <p> — открывающий тег, </p> — закрывающий. Они как скобки в предложении: открыли — обязательно закройте.

Что такое элемент

Элемент — это вся конструкция целиком: открывающий тег + содержимое + закрывающий тег. В примере выше элемент p — это <p>Текст абзаца</p>. Слова «тег» и «элемент» часто путают, но разница простая: тег — это метка, элемент — метка вместе с тем, что внутри.

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

Элементы можно вкладывать. Главное правило: закрывать в обратном порядке, как матрёшки. Сначала закрываем то, что открыли последним:

<p>Это <strong>важное</strong> слово.</p>

Так правильно: strong открыли и закрыли внутри p. А вот так — ошибка, теги «перекрещиваются»:

<p>Это <strong>важное</p> слово.</strong>

Одиночные теги

Некоторым тегам нечего «оборачивать» — они вставляют что-то готовое. У них нет закрывающей пары. Самый частый пример — перенос строки и картинка:

<br>
<img src="cat.jpg" alt="Кот">

Что такое атрибут

Атрибут — это дополнительная настройка, которую пишут внутри открывающего тега. Формат: имя="значение". Например, чтобы ссылка вела на нужный адрес, ей задают атрибут href:

<a href="https://codechick.io">Перейти на сайт</a>

Здесь:

• a — тег ссылки;
• href — имя атрибута (куда вести);
• "https://codechick.io" — значение атрибута (адрес).

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

Несколько атрибутов сразу

Часто элементу задают сразу несколько настроек. Тогда атрибуты просто перечисляют через пробел внутри открывающего тега — порядок значения не имеет:

<img src="logo.png" alt="Логотип" width="120">

Здесь у картинки сразу три атрибута: путь к файлу, описание и ширина. Каждый — в формате имя="значение", между ними пробелы.

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

Большинство атрибутов работают только со своими тегами: href — у ссылок, src — у картинок. Но есть и глобальные атрибуты, которые можно поставить почти любому элементу. Два из них вы будете встречать постоянно — id и class; им посвящён отдельный урок в конце курса. Пока достаточно знать, что они существуют и служат «ярлыками» для элемента.

Памятка

Итог

• Большинство тегов парные: открывающий и закрывающий со слешем.
• Элемент = открывающий тег + содержимое + закрывающий тег.
• Атрибуты настраивают элемент; их пишут в открывающем теге как имя="значение".