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

⚡ Кратко

Эталонные решения: каркас из <header> / <nav> / <main> / <aside> / <footer>, статья с боковой колонкой внутри <main> и иллюстрация в <figure> с <figcaption>. Смотри «Результат» рядом с кодом в подробном режиме.

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

Решение задания 1

Сначала определяем роли блоков, затем распределяем их по семантическим элементам. Каждая полоса в превью — отдельный тег.

<header> Шапка
<main> Основной контент
<footer> Подвал
<header>Шапка</header>
<nav>Меню</nav>
<main>Основной контент</main>
<aside>Подсказка</aside>
<footer>Подвал</footer>

Решение задания 2

Добавляем смысловую структуру: внутри <main> — статья и боковая заметка рядом.

<article>
Статья и её текст
<main>
  <article>
    <h2>Статья</h2>
    <p>Текст статьи.</p>
  </article>
  <aside>Дополнительная заметка</aside>
</main>

Решение задания 3

<figure> и <figcaption> оформляют изображение и подпись как единый блок.

🖼️ изображение
Схема семантической страницы
<figure>
  <img src="img/layout.png" alt="Схема страницы">
  <figcaption>Схема семантической страницы</figcaption>
</figure>