Урок 04. Теги, атрибуты, вложенность

📁 Раздел: Основы HTML ⏱️ Время изучения: ~30 мин 🎯 Сложность: Начальная
#lang

⚡ Кратко: суть урока

Тег - это имя HTML-элемента, элемент - это тег вместе с содержимым, а атрибуты добавляют элементу дополнительные свойства. Вложенность показывает, какие элементы внутри каких находятся, и именно от неё зависит структура документа и удобство поддержки.

  • class помогает группировать элементы.
  • id нужен для уникальных элементов.
  • data-* хранит свои данные прямо в разметке.

Что запомнить: аккуратная вложенность делает HTML читаемым и предсказуемым.

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

📖 О чём этот урок

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

⚠️ Важно: HTML прощает многое, но плохую структуру потом тяжело поддерживать. Лучше сразу писать аккуратно.

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

  • Тег - это имя элемента, например div или p.
  • Элемент - это тег вместе с содержимым и закрывающим тегом.
  • Атрибут - дополнительная настройка элемента, например class, id или data-role.

Почему важна вложенность

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

Когда использовать class, id и data-*

  • class - для повторяемых стилей и группировки похожих элементов.
  • id - для уникального якоря, ссылки или редкой точки входа.
  • data-* - для собственных данных, которые не относятся к внешнему виду.

💻 Что покажем в примерах

В примерах урока вы увидите, как один и тот же блок может быть описан через атрибуты class, id и data-*, а также как правильная вложенность помогает сделать HTML понятным с первого взгляда.

📝 Практика урока

  • Добавить атрибуты к нескольким элементам и объяснить, зачем каждый из них нужен.
  • Проверить вложенность в простом макете карточки.
  • Исправить ошибку с незакрытым тегом и увидеть, как меняется дерево документа.

🐛 На что обратить внимание

Новички часто ставят id на каждый элемент, закрывают теги не по порядку или используют div там, где уже есть подходящий HTML-элемент. Сегодняшний урок помогает избавиться от этих привычек.

🔗 Ресурсы

Официальные ссылки собраны в resources.html. Там есть MDN по атрибутам, глобальным атрибутам и data-*.

🏠 Домашнее задание

Домашнее задание этого урока - собрать собственную карточку с атрибутами и проверить вложенность в браузере. Подробности - в homework.html.

📚 Что повторить перед уроком

🎯 Что изучать дальше