HTML

HTML5: семантическая разметка страницы

📚 24 вопросовПройти тест →
Лекция

HTML5: семантическая разметка страницы

HTML

HTML5: семантическая разметка страницы

Введение: как план здания 🏛️

Представьте архитектурный план: комнаты подписаны, входы понятны.
Так и в HTML5 — семантические теги говорят, что именно внутри блока.
💡 Совет: семантика помогает не только браузеру, но и людям.
✅ Вывод: семантическая разметка делает страницу логичной и доступной.

Проблема: всё в div ❌

Без семантики:
  • поисковик не понимает структуру;
  • экранные дикторы теряются;
  • код сложно читать.
С семантикой:
  • структура ясна;
  • доступность выше;
  • поддержка проще.
✅ Вывод: семантика — это читаемость и порядок.

Чем помогает и как работает

  • делает структуру страницы очевидной для человека, поисковика и скринридера;
  • упрощает поддержку кода: по тегам сразу видно назначение блока;
  • снижает риск хаоса из одинаковых div без смысла.
Как это работает:
  1. Разбиваем страницу на роли: шапка, навигация, основной контент, дополнения и подвал.
  2. Для каждой роли выбираем соответствующий семантический тег HTML5.
  3. Проверяем, что структура читается последовательно и логично.
  4. Убеждаемся, что ключевой контент находится в main, а второстепенный — в aside/footer.
✅ Вывод: семантическая разметка превращает страницу из набора блоков в понятную архитектуру.

Что такое семантическая разметка

Семантика — это смысловое обозначение блоков страницы.
Мы показываем, где шапка, где меню, где основное содержание.
✅ Вывод: семантика объясняет назначение блоков.

Ключевые термины (простыми словами)

  • header — шапка страницы или блока.
  • nav — навигация.
  • main — главный контент.
  • section — логический раздел.
  • article — самостоятельный материал.
  • aside — боковой/второстепенный контент.
  • footer — подвал страницы или блока.
✅ Вывод: эти теги = карта структуры.

1. header — шапка

Назначение: верхняя зона страницы или блока.
Простыми словами: header — это шапка страницы или секции, где пользователь получает первичный контекст.
Аналогия: титульная часть книги.
Пример:
<header>  <h1>Каталог курсов</h1></header>
🔎 Как это происходит на практике:
  1. В шапке размещаю название страницы и ключевой заголовок.
  2. Не переношу в header случайный контент, который не задаёт контекст.
  3. Проверяю, что пользователь сразу понимает, где он находится.
❗ Когда использовать: в начале страницы и тематических блоков, где нужен вводный заголовок. ✅ Вывод: header сообщает, что это «вводная часть».

2. nav — навигация

Назначение: ссылки на ключевые разделы.
Простыми словами: nav — это меню маршрутов, по которому пользователь двигается по сайту.
Аналогия: меню в ресторане.
Пример:
<nav>  <a href="/courses">Курсы</a>  <a href="/about">О нас</a></nav>
🔎 Как это происходит на практике:
  1. Собираю в nav только навигационные ссылки, а не любые действия.
  2. Ставлю понятные тексты пунктов меню.
  3. Проверяю, что путь к ключевым разделам занимает минимум кликов.
❗ Когда использовать: для главного меню, боковых меню и структурных переходов. ✅ Вывод: nav = карта переходов.

3. main — основной контент

Назначение: главный смысл страницы.
Простыми словами: main — это основное тело страницы, которое видит пользователь и ради которого он открыл страницу.
Аналогия: основная глава книги.
Пример:
<main>  <h2>Популярные курсы</h2></main>
Характеристика: только один main на страницу.
🔎 Как это происходит на практике:
  1. Выделяю центральный контент и помещаю его в main.
  2. Проверяю, что main на странице только один.
  3. Убираю из main повторяющиеся служебные блоки сайта.
❗ Когда использовать: на каждой странице как единственный главный контентный блок. ✅ Вывод: main = ядро страницы.

4. section — логический раздел

Назначение: группировать связанные блоки.
Простыми словами: section — это тематический раздел внутри основной структуры страницы.
Аналогия: раздел в отчёте.
Пример:
<section>  <h2>Отзывы</h2></section>
🔎 Как это происходит на практике:
  1. Выделяю самостоятельную тему и оборачиваю её в section.
  2. Добавляю заголовок раздела, чтобы читалась структура.
  3. Проверяю, что внутри одного section материалы связаны одной мыслью.
❗ Когда использовать: когда внутри страницы нужно логически разделить темы. ✅ Вывод: section — раздел с общей темой.

5. article — самостоятельный материал

Назначение: независимый блок контента, который можно вынести отдельно.
Простыми словами: article — это самостоятельный материал, который можно читать отдельно от страницы.
Аналогия: статья в журнале.
Пример:
<article>  <h2>Курс по HTML</h2></article>
🔎 Как это происходит на практике:
  1. Определяю блок, который имеет самостоятельный смысл.
  2. Размечаю его через article и даю собственный заголовок.
  3. Проверяю, что этот блок можно вынести в отдельную страницу без потери контекста.
❗ Когда использовать: для постов, новостей, карточек материалов и независимых публикаций. ✅ Вывод: article — самодостаточный контент.

6. aside — боковой контент

Назначение: второстепенная информация.
Простыми словами: aside — это дополнительный контент рядом с основным материалом.
Аналогия: блок «Похожие материалы».
Пример:
<aside>  <h3>Популярные темы</h3></aside>
🔎 Как это происходит на практике:
  1. Отделяю второстепенные материалы от ядра страницы.
  2. Помещаю их в aside, чтобы сохранить приоритеты чтения.
  3. Проверяю, что без aside основной сценарий всё равно остаётся понятным.
❗ Когда использовать: для второстепенных блоков: подсказок, похожих материалов, рекламы. ✅ Вывод: aside — дополнение, а не ядро.

7. footer — завершение

Назначение: подвал страницы или блока.
Простыми словами: footer — это завершающий блок с служебной информацией и навигацией по завершению.
Аналогия: подпись в конце документа.
Пример:
<footer>© 2026 Онлайн‑курсы</footer>
🔎 Как это происходит на практике:
  1. В footer размещаю копирайт, служебные ссылки и контакты.
  2. Не дублирую в footer основной контент страницы.
  3. Проверяю, что пользователь воспринимает footer как завершение раздела.
❗ Когда использовать: в конце страницы или крупного смыслового блока. ✅ Вывод: footer закрывает раздел.

8. section vs article

Простыми словами: section — часть текущей страницы, article — самостоятельная единица контента.
  • section — раздел, зависящий от контекста страницы.
  • article — независимый материал.
🔎 Как это происходит на практике:
  1. Спрашиваю себя: можно ли блок вынести отдельно и опубликовать как самостоятельный материал.
  2. Если да — выбираю article, если нет — section.
  3. Проверяю итоговую структуру, чтобы не смешивать роли этих тегов.
❗ Когда использовать: когда нужно выбрать корректный семантический тег между двумя похожими вариантами. ✅ Вывод: article можно вынести отдельно, section — часть страницы.

Сравнение: section vs article

Чтоsectionarticle
СмыслРаздел внутри страницыСамостоятельный материал
Вынести отдельноНетДа

Часто спрашивают на собеседованиях

  • Когда использовать section, а когда article? Article — самостоятельный контент, section — часть страницы.
  • Сколько main может быть на странице? Только один.
  • Нужно ли nav оборачивать ссылки? Да, если это меню.
  • Почему нельзя всё в div? Теряется смысл и доступность.
✅ Вывод: семантика — один из базовых фильтров на интервью.

Типичные ошибки

Ошибка 1: Всё в div

❌ Неправильно: нет смысла.
✅ Правильно: использовать семантические теги.

Ошибка 2: Несколько main

❌ Неправильно: ломает структуру.
✅ Правильно: один main.

Ошибка 3: nav без навигации

❌ Неправильно: нет ссылок.
✅ Правильно: nav только с меню.

Best Practices

  • Используйте header, main, footer как базовый каркас.
  • Выносите меню в nav.
  • Разделы оформляйте через section.
  • Самостоятельные блоки — через article.
  • aside — только для второстепенного контента.

Заключение

Ключевые мысли

🎯 Семантика делает структуру понятной.
🎯 main — ядро, section — раздел, article — независимый блок.
🎯 Чем чище семантика, тем легче читать и поддерживать.
Если блоки имеют смысл — страница становится удобной для всех.
🎯

Проверьте знания

Закрепите материал — пройдите тест по теме «HTML5: семантическая разметка страницы»

Пройти тест →