Урок 6 · HTML

Семантика HTML: объясни структуру страницы

Редакция PraktumОбновлено 24 октября 202616 минут на урок с практикойУровень: новичок

Семантическая вёрстка — разметка, в которой теги выбирают по смыслу, а не по виду: шапка — header, навигация — nav, основное содержание — main, самостоятельный материал — article, подвал — footer. Браузер, скринридер и поисковик понимают по таким тегам роль каждой части страницы.

Зачем этот урок сейчас

Страницу из одних div можно оформить точно так же, как семантическую. Разница видна тем, кто читает не глазами: скринридер не сможет сразу перейти к основному тексту, поисковик хуже отделит статью от меню, а через месяц ты сам будешь гадать, что за div class="wrapper2". Семантика ничего не стоит при написании и сильно упрощает жизнь потом.

Каркас семантической страницы

<body>
  <header>
    <a href="/">Praktum</a>
    <nav aria-label="Разделы сайта">
      <a href="/html/">HTML</a>
      <a href="/css/">CSS</a>
    </nav>
  </header>

  <main>
    <article>
      <h1>Как подписать поле формы</h1>
      <p>У каждого поля должна быть видимая подпись.</p>
      <section>
        <h2>Тег label</h2>
        <p>…</p>
      </section>
    </article>
    <aside>
      <h2>Ещё по теме</h2>
      <a href="/html/inputy/">Типы input</a>
    </aside>
  </main>

  <footer>
    <p>© 2026 Praktum</p>
  </footer>
</body>

Даже без CSS такая страница читается сверху вниз: шапка с навигацией, статья с разделами, дополнительный блок, подвал. Это и есть цель — структура понятна из тегов.

Семантические теги и их роли

Роли — это то, что скринридер объявляет и по чему даёт переходить: «главная область», «навигация». Человек с клавиатурой одной командой прыгает к main, пропуская шапку.

article, section или div

article — материал, который имеет смысл сам по себе: его можно вынуть со страницы, отправить в рассылку или ленту, и он останется понятным. Урок, новость, карточка товара в каталоге, комментарий.

section — часть целого: глава статьи, блок «Программа курса» на лендинге. У section почти всегда есть свой заголовок. Если заголовка не придумать, скорее всего, это не section, а div.

div не несёт смысла и нужен для оформления: обёртка для сетки, контейнер карточки. Это нормально — плохо не использование div, а страница, где им заменили заголовки, списки и кнопки.

Заголовки — скелет страницы

Скринридеры позволяют перемещаться по заголовкам, как по оглавлению. Поэтому уровни идут по порядку: один h1 с темой страницы, разделы — h2, подразделы — h3. Не прыгай с h1 на h4 ради мелкого шрифта: размер меняют в CSS, а уровень заголовка отражает вложенность.

<h1>Формы HTML</h1>
  <h2>Поля ввода</h2>
    <h3>Тип email</h3>
    <h3>Тип tel</h3>
  <h2>Кнопки</h2>

Подробно — в справочнике заголовки и абзацы.

Семантика внутри текста

Например, em и i оба выглядят курсивом, но первый означает ударение, а второй — просто другой голос: термин или иностранное слово.

Несколько header, nav и footer

На странице может быть несколько header и footer: один у всей страницы, другие — у статей внутри. А вот main — только один видимый. Если на странице несколько nav (меню сайта и оглавление урока), подпиши их через aria-label: «Разделы сайта» и «Содержание урока». Иначе скринридер объявит две одинаковые «навигации».

Что семантика даёт поиску

Семантические теги не дают прямого бонуса к позициям, но помогают поисковику и ИИ-ассистентам правильно разобрать страницу: отделить основной текст от меню и подвала, понять структуру по заголовкам, найти дату в time. Хорошо размеченный текст проще превратить в быстрый ответ или цитату. Поэтому семантика — фундамент, на котором работают остальные SEO-приёмы.

Быстрая проверка структуры

• Отключи CSS в DevTools: страница читается сверху вниз и понятна.
• Один h1, уровни заголовков без пропусков.
• Один main, в нём основной материал.
• Ссылки меню в nav, а ссылки внутри абзаца — нет.
• У каждого section есть заголовок.

В Chrome DevTools во вкладке Accessibility видно дерево ролей; расширения вроде «HeadingsMap» показывают структуру заголовков.

Семантический тег или div с классом

Частые ошибки

• Ставят несколько видимых main на одной странице.
• Оборачивают в nav одну случайную ссылку, а не набор переходов.
• Пропускают уровни заголовков: после h1 сразу h4.
• Оборачивают в section каждый блок без заголовка «на всякий случай».
• Делают кнопки и ссылки из div с обработчиком клика.

Доступность

Семантика — основа доступности. Области страницы дают человеку со скринридером переход к нужной части одной командой, заголовки — оглавление, списки — объявление количества пунктов. Добавь в начало страницы ссылку «К содержимому», ведущую к main, для тех, кто перемещается клавишей Tab.

Поддержка браузерами

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

<header>
  <a href="/">Мой сайт</a>
  <nav aria-label="Разделы сайта">
    <a href="/">Главная</a> <a href="/blog/">Блог</a> <a href="/about/">О себе</a>
  </nav>
</header>
<main>
  <article>
    <h1>Как я сделал первую страницу</h1>
    <section>
      <h2>Подготовка</h2>
      <p>…</p>
    </section>
    <section>
      <h2>Результат</h2>
      <figure>
        <img src="result.png" alt="Страница-визитка с фото и списком интересов" width="800" height="500">
        <figcaption>Первая версия визитки</figcaption>
      </figure>
    </section>
  </article>
  <aside>
    <h2>Ещё по теме</h2>
    <a href="/blog/css/">Первые стили</a>
  </aside>
</main>
<footer><p>© 2026</p></footer>