💻 Практические примеры

В каждом примере справа — код, сверху — реальный рендер семантического макета. Цветные блоки в превью показывают, какую часть страницы занимает каждый тег.

Пример 1. Базовый каркас страницы

Шапка, навигация, основной контент и подвал — друг под другом. Это скелет почти любого сайта.

<header>Блог о вёрстке</header>
<nav>Главная · Статьи · О нас</nav>
<main>Основное содержимое страницы</main>
<footer>© 2026</footer>

Пример 2. <main> с <article> и <aside>

Внутри <main> основной материал и боковая колонка стоят рядом. Так получается классическая раскладка «контент + сайдбар».

<main>
  <article>
    <h2>Новая статья</h2>
    <p>Текст статьи.</p>
  </article>
  <aside>Совет недели</aside>
</main>

Пример 3. <section> с несколькими <article>

<section> группирует однотипные материалы по теме. Внутри — лента из самостоятельных <article>.

<section>
  <h2>Свежие посты</h2>
  <article><h3>Пост №1</h3></article>
  <article><h3>Пост №2</h3></article>
</section>

Пример 4. <figure> и <figcaption>

<figure> оборачивает иллюстрацию, а <figcaption> — подпись под ней. Здесь вместо картинки — наглядный плейсхолдер.

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

Пример 5. Проверка структуры в DevTools

Семантику удобно проверить глазами в браузере.

1. Откройте локальную страницу в браузере.
2. Нажмите F12 и посмотрите дерево элементов на вкладке Elements.
3. Найдите вкладку Accessibility — там видно ориентиры (landmarks): banner (header), navigation (nav), main, contentinfo (footer).