Когда я начинал верстать сайты, моя первая страница была похожа на слоеный пирог из <div> — и все бы ничего, но разобраться в этом коде мог только я, и то с трудом. А что говорить о браузерах или поисковых системах? Они вообще видели просто набор блоков. Потом я открыл для себя семантическую верстку — и мир перевернулся. В этой статье я расскажу, как сделать свой код чистым, понятным и «вкусным» для всех.

Digital-студия WNDER

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

Семантическая верстка — это подход, при котором каждый элемент страницы использует тег, соответствующий его смыслу. Например, если у вас есть шапка сайта — используйте <header>, а не <div id="header">. Если это навигация — <nav>, а не <ul class="menu">. Просто? Да, но именно в этой простоте скрывается сила.

Зачем это нужно? Во-первых, поисковые системы лучше понимают структуру страницы. Во-вторых, скринридеры (программы для чтения с экрана) могут правильно озвучить содержимое для людей с ограниченными возможностями. В-третьих, ваш код становится читаемым для других разработчиков — и для вас самих через месяц.

Кстати, семантическая верстка — это не только про теги. Это еще и про правильное использование заголовков, атрибутов, структуры документа. Давайте разберемся по порядку.

Основные семантические теги: ваш набор супергероя

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

Тег Назначение Пример использования
<header> Шапка страницы или раздела Логотип, название сайта, краткое описание
<nav> Навигационное меню Главное меню сайта
<main> Основное содержимое страницы Статьи, посты, контент
<article> Самостоятельный блок контента Новость, пост, комментарий
<section> Логический раздел страницы Глава статьи, блок с контактами
<aside> Боковая панель или доп. контент Виджеты, реклама, ссылки на похожие статьи
<footer> Подвал страницы или раздела Копирайт, контакты, соцсети

Но не спешите заменять все <div> на эти теги. Важно понимать: если у вас просто блок для стилизации — используйте <div>. Семантика не должна быть насилием.

Заголовки: строим иерархию правильно

Заголовки — это скелет вашей страницы. Они помогают читателю быстро понять, о чем речь, а поисковикам — определить структуру. Но многие делают ошибки: используют <h1> несколько раз или прыгают с <h2> на <h4>, пропуская <h3>.

Правило простое: на странице должен быть один <h1> (обычно это название страницы), а дальше заголовки идут по порядку — <h2>, <h3> и так далее. Вы можете пропускать уровни вниз (например, после <h2> сразу <h4>), но не вверх — это нарушает иерархию.

Вот пример правильной структуры:

<h1>Как испечь хлеб дома</h1>
<h2>Ингредиенты</h2>
<h3>Для теста</h3>
<h3>Для смазывания</h3>
<h2>Пошаговый рецепт</h2>
<h3>Шаг 1: Замешиваем тесто</h3>
<h3>Шаг 2: Выпекаем</h3>
</code>

Заметьте, как логично все выглядит. Читатель сразу видит структуру, а поисковик понимает, что главное — «Как испечь хлеб», а «Ингредиенты» — подраздел.

Лайфхак: Если вы сомневаетесь, какой тег использовать для заголовка, просто спросите себя: «Это главный заголовок страницы?» Если да — <h1>. Если это подраздел — <h2>. И так далее. Не усложняйте.

Списки: не только для маркеров

Списки — это не просто способ красиво оформить перечень. Они несут смысловую нагрузку. Есть три типа списков:

  • Маркированный (<ul>) — для перечней, где порядок не важен. Например, список продуктов.
  • Нумерованный (<ol>) — для последовательностей. Например, шаги инструкции.
  • Список определений (<dl>) — для терминов и их описаний. Например, глоссарий.

Многие используют <ul> для всего подряд, даже для навигации. Но для навигации есть специальный тег <nav>, а внутри уже можно использовать <ul>. Это не ошибка, но лучше комбинировать.

Пример правильного использования списка определений:

<dl>
  <dt>Семантическая верстка</dt>
  <dd>Подход к созданию веб-страниц, при котором каждый элемент использует тег по своему смыслу.</dd>
  <dt>Тег</dt>
  <dd>Элемент HTML, который определяет структуру и содержание веб-страницы.</dd>
</dl>

Типичные ошибки и как их избежать

Даже опытные разработчики иногда спотыкаются. Вот список частых ошибок в семантической верстке:

Ошибка Почему это плохо Как исправить
Использование <div> для всего Поисковики и скринридеры не понимают структуру Заменить на семантические теги там, где это уместно
Несколько <h1> на странице Путает поисковые системы, снижает релевантность Оставить только один <h1>
Пропуск уровней заголовков Нарушает иерархию документа Соблюдать порядок: h1, h2, h3...
Использование <blockquote> для цитат с оформлением Не несет смысловой нагрузки Использовать для реальных цитат, а для оформления — <div>
Игнорирование <figure> и <figcaption> Изображения без подписей теряют контекст Оборачивать изображения в <figure> и добавлять <figcaption>

И еще один важный момент: не забывайте про атрибут alt для изображений. Это не только для SEO, но и для доступности — скринридеры озвучивают этот текст людям с проблемами зрения.

Вот пример, как правильно оформить изображение с подписью:

<figure>
  <img src="cake.jpg" alt="Домашний хлеб на столе">
  <figcaption>Домашний хлеб, испеченный по нашему рецепту</figcaption>
</figure>

Практический пример: собираем страницу правильно

Давайте соберем простую страницу блога, используя все знания. Представьте, что это страница с рецептом.

<body>
  <header>
    <h1>Мой кулинарный блог</h1>
    <nav>
      <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Рецепты</a></li>
        <li><a href="#">Обо мне</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <article>
      <h2>Как испечь идеальный багет</h2>
      <p>В этом рецепте я поделюсь секретами французских пекарей.</p>
      
      <section>
        <h3>Ингредиенты</h3>
        <ul>
          <li>Мука — 500 г</li>
          <li>Вода — 350 мл</li>
          <li>Дрожжи — 10 г</li>
          <li>Соль — 10 г</li>
        </ul>
      </section>
      
      <section>
        <h3>Приготовление</h3>
        <ol>
          <li>Смешайте муку и соль.</li>
          <li>Растворите дрожжи в воде.</li>
          <li>Замесите тесто и оставьте на 2 часа.</li>
        </ol>
      </section>
    </article>
  </main>
  
  <aside>
    <h3>Похожие рецепты</h3>
    <ul>
      <li><a href="#">Чиабатта</a></li>
      <li><a href="#">Фокачча</a></li>
    </ul>
  </aside>
  
  <footer>
    <p>© 2025 Мой кулинарный блог</p>
  </footer>
</body>

Видите, как все чисто и понятно? С первого взгляда ясно, где шапка, где контент, где сайдбар. Такой код легко поддерживать и развивать.

Правило: Если вы можете объяснить, что делает каждый блок на странице, просто взглянув на разметку, — вы на верном пути. Если нет — пора упрощать.

Что в итоге

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

  • Улучшить SEO-продвижение — поисковики лучше понимают структуру.
  • Повысить доступность — сайтом смогут пользоваться люди с ограниченными возможностями.
  • Упростить поддержку — код становится читаемым и логичным.
  • Ускорить разработку — вы быстрее находите нужные блоки.

Начните с малого: замените самые очевидные <div> на семантические теги, приведите заголовки в порядок, добавьте подписи к изображениям. Не пытайтесь сделать все сразу — лучше делать постепенно, но правильно.

И помните: семантика — это не догма. Иногда <div> — это лучшее решение. Главное — чтобы ваш код имел смысл и был понятен. Удачи в верстке!

Студия WNDER