MP Web Studio
HTMLБазовый трек
06 / 120

УРОК 06 ИЗ 120

Семантическая структура страницы

Организуйте страницу с понятными ориентирами.

Официальный источникWHATWG HTML — sectionsПроверено: 2026-08-26
ШАГ 1 · ИЗУЧИТЕ

Как это работает

header, nav, main и footer описывают назначение областей.

Правильный пример
<header>
  <h1>Цифровая студия</h1>
  <nav><a href="#services">Услуги</a></nav>
</header>
<main id="services"><p>Основное содержимое.</p></main>
<footer><p>Контакты.</p></footer>

Каждый элемент сообщает назначение области. main используется один раз и содержит основное содержание страницы.

Частая ошибка
<div class="header">Заголовок</div>
<div class="main">Содержимое</div>
<div class="footer">Контакты</div>

Классы подсказывают роль только разработчику; семантические элементы сообщают её браузеру и вспомогательным технологиям.

ШАГ 2 · ПРИМЕНИТЕ

Ваше задание

Используйте header, nav со ссылкой, один main и footer.

ШАГ 3 · СОЗДАЙТЕ

Напишите и посмотрите результат

index.htmlHTML
Безопасный результатизолировано
Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы
ШАГ 4 · ПРОВЕРЬТЕ

Что должно пройти

0%не проверено
  • Есть header, nav, main и footer.
  • В nav есть ссылка.
  • На странице один main.
Объясните логику решения

Заменяйте общие контейнеры, когда роль ясна. Оставляйте один main для главного содержания.