📋 Формулировка задания
Задание урока 05:
Сверстайте страницу с шапкой, меню, основным материалом, боковой заметкой и подвалом. Используйте семантические элементы там, где это логично: `header`, `nav`, `main`, `article`, `aside`, `footer`. Добавьте `figure` и `figcaption`, если есть изображение.
🔧 Шаг 0. Подготовка рабочего места
Создайте папку урока, откройте её в VS Code и держите страницу в `index.html`. Внешний вид пока не важен - сначала соберите правильную структуру.
🛠️ Шаги выполнения
Определите роли блоков
Подумайте, где на макете находятся шапка, навигация, основной материал и боковая колонка.
Соберите семантическую страницу
Используйте `header`, `nav`, `main`, `section`, `article`, `aside` и `footer` вместо одинаковых `div`.
Добавьте подпись к иллюстрации
Если в макете есть картинка, оберните её в `figure` и добавьте `figcaption`.
✅ Полное решение
Ниже — эталонный семантический каркас страницы и то, как он выглядит в браузере.
Файл: subjects/html-css/course/lessons/05-semantic-html/homework.html
<!-- index.html — полное решение -->
<header>
<h1>Мой сайт</h1>
</header>
<nav>Меню</nav>
<main>
<article>
<h2>Материал</h2>
<p>Основной текст страницы.</p>
<figure>
<img src="img/layout.png" alt="Схема">
<figcaption>Подпись к иллюстрации</figcaption>
</figure>
</article>
<aside>Боковая заметка</aside>
</main>
<footer>Подвал</footer>🧪 Как проверить решение
- Откройте страницу в браузере и посмотрите структуру в DevTools.
- Убедитесь, что `main` один, а роли блоков читаются без CSS.
- Проверьте, что у изображения есть `alt`, а у подписи - `figcaption`.
💡 Советы
- Не подменяйте смысл элементов классами.
- Если элемент можно назвать семантически, не прячьте его в `div`.
- Думайте о структуре страницы так, как будто CSS пока отсутствует.