UA RU
Закрыть

Семантические теги HTML5: Почему стоит отказаться от «div-спагетти» и какое это имеет влияние на SEO и Accessibility

26.09.2026 SebWeo

Во времена HTML4 большинство веб-страниц состояло из бесконечной каскадной сетки тегов <div> с соответствующими классами (class="header", class="footer", class="content"). Такой подход делал верстку лишенной контекстного значения для поисковых роботов и экранных дикторов (Screen Readers).

С появлением спецификации HTML5 разработчики получили полноценный набор семантических тегов. Семантический тег четко описывает свое значение как для браузера, так и для разработчика, алгоритмов поисковых систем (например, Googlebot) и ассистентов доступности (A11y).

 

1. Основные структурные теги макета (Layout Elements)

Эти теги формируют скелет документа и заменяют стандартные макетные блоки div:

  • <header> — определяет «шапку» страницы или отдельного блока/статьи. Обычно содержит логотип, навигацию, поисковую ленту или вводные заголовки.
  • <nav> — контейнер для основных навигационных ссылок. Помогает поисковым ботам и экранным дикторам мгновенно идентифицировать меню сайта.
  • <main> — уникальный основной контент страницы. На странице может быть только один тег <main> (не должен вкладываться в <article> или <header>).
  • <article> — самодостаточный автономный блок контента, который можно отчужденно распространять или републиковать (например, статья в блоге, карточка товара, сообщение в соцсети или комментарий).
  • <section> — тематическая группировка контента, как правило, с собственным заголовком (<h2>—<h6>). В отличие от article, не имеет самостоятельного значения вне контекста страницы.
  • <aside> — боковая панель (сайдбар) или блок с дополнительным контентом, косвенно связанный с основным материалом (подобные статьи, реклама, виджеты).
  • <footer> — «подвал» страницы или секции. Содержит информацию об авторских правах, контактах, ссылки на юридические аспекты и соцсети.

 

2. Сравнительный анализ: Полезные семантические теги и их назначение

Тег Семантическая роль Типовой кейс использования
<figure> и <figcaption> Группирует медиа-контент (изображение, график, код) и добавляет к нему официальную подпись. Иллюстрации в статьях, диаграммы с описанием источника.
<time> Указывает дату/время в машиночитаемом формате через атрибут datetime. Дата публикации статьи, время проведения события для микроразметки (Schema.org).
<mark> Выделяет текст, имеющий контекстную актуальность (подсветка). Результаты поиска на сайте, акцентирование важных цитат.
<details> и <summary> Создает нативный интерактивный раскрывающийся блок (аккордеон) без использования JavaScript. Разделы частых вопросов (FAQ), скрытые технические характеристики.
<address> Указывает контактную информацию автора или владельца веб-ресурса. Контактные данные в футере или на странице «О нас».

 

3. Практический пример верной HTML5-структуры

Вот как выглядит чистый, семантически корректный код типичной страницы публикации:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Заголовок страницы</title>
</head>
<body>

    <header>
        <a href="/">Логотип</a>
        <nav>
            <ul>
                <li><a href="/about">О нас</a></li>
                <li><a href="/blog">Блог</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <header>
                <h1>Как правильно использовать HTML-семантику</h1>
                <p>Опубликовано: <time datetime="2026-09-26">26 сентября 2026</time></p>
            </header>

            <section>
                <h2>Вступление</h2>
                <p>Текст вступления...</p>
                
                <figure>
                    <img src="semantic-tree.webp" alt="Дерево семантических тегов HTML5">
                    <figcaption>Рис 1. Структура семантических элементов.</figcaption>
                </figure>
            </section>

            <section>
                <h2>Часто задаваемые вопросы</h2>
                <details>
                    <summary>Влияет ли семантика на SEO?</summary>
                    <p>Да, поисковые работы лучше понимают иерархию контента.</p>
                </details>
            </section>
        </article>

        <aside>
            <h3>Похожие материалы</h3>
            <!-- Ссылки на другие статьи -->
        </aside>
    </main>

    <footer>
        <address>
            Киев, ул. Крещатик, 1 | email: info@example.com
        </address>
        <p>&copy; 2026 Все права защищены.</p>
    </footer>

</body>
</html>

 

Совет по SEO и Accessibility: Использование семантических тегов автоматически создает для страницы встроенные ARIA-роли (Landmarks). Например, тег <nav> получает роль role="navigation", а <main> — role="main". Это позволяет пользователям с нарушениями зрения легко перемещаться по сайту с помощью скринридеров, а краулерам Google — определять первостепенный контент для лучшего индексирования.

 

Итог: Переход от чистого «div-дизайна» к семантической версте – это показатель профессионализма разработчика. Семантические теги делают код читабельным для команды, упрощают дальнейшую поддержку проекта, повышают позиции в поисковой выдаче (SEO) и обеспечивают равные возможности доступа к информации для всех пользователей.

 

Категории:

Теги:

Похожие статьи

Комменты

Комментариев пока нет.

Оставить комментарий на основной странице