✅ Решения заданий

⚡ Кратко

Задание 1 — повесить class, id, data-*. Задание 2 — собрать дерево из смысловых блоков. Задание 3 — закрыть теги в зеркальном порядке.

⚠️ Рекомендация: сначала попробуйте собрать структуру сами. Ниже — удобный эталон, а не единственный правильный вариант.

Решение задания 1. Подписать карточку

Добавляем атрибуты, чтобы карточку было удобно стилизовать и различать.

Введение

Карточка с полезными атрибутами.

<section class="card" id="intro" data-step="1">
  <h2>Введение</h2>
  <p>Карточка с полезными атрибутами.</p>
</section>

Решение задания 2. Дерево из смысловых блоков

Строим структуру из шапки, основного блока и боковой заметки, следим за порядком вложенности.

Шапка
Основной блок
<div class="page">
  <header class="page__header">Шапка</header>
  <main class="page__main">
    <article class="card">Основной блок</article>
    <aside class="page__aside" data-role="tips">Подсказки</aside>
  </main>
</div>

Решение задания 3. Правильный порядок закрытия

Открыли div → section → p — закрываем зеркально: /p → /section → /div. Внутренний элемент всегда закрывается раньше внешнего.

Текст

<div class="wrapper">
  <section class="card">
    <p>Текст</p>
  </section>
</div>