📝 Практические задания

⚡ Задания в двух словах

  • Разобраться, чем тег отличается от элемента.
  • Добавить class, id и data-* к карточке.
  • Исправить неверную вложенность и незакрытые теги.

🏋️ Раздел тренировки

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

Цель тренировки: уверенно использовать атрибуты и читать вложенность как дерево, а не как случайный набор строк.

Задание 1. Подпишите карточку

Условие: возьмите блок карточки и добавьте к нему class, id и data-step.

Что должно получиться: карточка с понятными атрибутами, пригодная для стилей и логики.

<!-- Исходник без атрибутов — допишите их -->
<section>
  <h2>Введение</h2>
  <p>Текст карточки.</p>
</section>

Задание 2. Постройте вложенную структуру

Условие: создайте шапку, основной блок и боковую заметку внутри общей страницы.

Что должно получиться: аккуратное дерево из вложенных элементов без лишних div. Целевая структура:

page header main article aside
Дерево цели: pageheader + mainarticle + aside.

Задание 3. Исправьте ошибку в разметке

Условие: найдите и исправьте неправильный порядок вложенности в примере.

<!-- Что здесь не так? -->
<div>
  <section>
    <p>Текст</div>
  </section>
</p>

Что должно получиться: корректная структура, которую легко проверить в DevTools и валидаторе W3C.