HTML Accessibility SEO Web Standards Frontend

От простого супа до значимой маркировки: практическое руководство по семантическому HTML

Узнайте, почему обычные элементы div нарушают доступность, индексацию и возможности технического обслуживания, какие семантические элементы следует использовать вместо них, и как переписать реальный компонент карточки.

Издатель: REACTAPP.TOPДобавлено на сайт 23 сент. 2026 г.16 мин чтения3565 слов

Источники: Stop Using Divs for Everything — Semantic HTML Actually Matters

Если открыть инспектор элементов в типичном современном веб-приложении, вы часто увидите одну и ту же картину: глубокую, анонимную стопку элементов <div>, каждый из которых идентифицируется только по имени класса. Страница может выглядеть идеально, но для скрин-ридеров, поисковых роботов и следующего разработчика в команде она почти ничего не говорит о содержимом. В этом руководстве объясняется, в чем заключается ущерб от этого, какие семантические элементы могут заменить большинство этих div-элементов, как сделать правильный выбор между подобными элементами (<article> или <section>, ссылка или кнопка) и как пошагово переписать компонент заново.

Вот этот шаблон в его самой чистой форме: заголовок, навигация, основное содержимое и футер, все они представлены в виде обычных контейнеров.

<!-- The modern web's favorite anti-pattern -->
<div class="header">
  <div class="nav-container">
    <div class="nav-item">Home</div>
    <div class="nav-item">About</div>
  </div>
</div>
<div class="main-content">
  <div class="article-title">Stop Using Divs</div>
  <div class="article-body">
    <div class="paragraph">Divs everywhere.</div>
  </div>
</div>
<div class="footer">
  <div class="copyright">© 2026</div>
</div>

Каждый элемент структуры в этом фрагменте находится в именах классов. Если убрать классы, то не останется ничего, что могло бы указать компьютеру или человеку, где заканчивается навигация и начинается статья. Такой стиль обычно называют «супом из div», и он встречается гораздо чаще, чем следовало бы.

Почему HTML превратился в инструмент для стилизации

По мере того как фреймворки вроде React, Vue, Angular и Svelte стали доминировать в работе с фронтендом, а CSS с упором на утилиты сделал стилизацию почти безусловной, маркиупин тихо потерял свою первоначальную функцию. HTML начал использоваться как нейтральная основа для привязки классов и обработчиков событий, а не как язык для описания контента. Это неправильное понимание платформы: HTML был создан для передачи смысла, а не для выполнения функций лейаут-механизма.

Когда это значение исчезает, ущерб оказывается одновременно в нескольких областях. Технологии вспомогательного доступа теряют свои средства навигации, поисковые системы получают более слабую информацию о том, что важно на странице, браузер больше не может обеспечивать встроенное поведение, а код становится труднее для понимания коллегами. Ни одна из этих проблем не видна на скриншоте, и именно поэтому они сохраняются.

Корневыми элементами компонентов по умолчанию являются div

Архитектура компонентов разделяет интерфейс на небольшие части, такие как <Button/>, <Card/>, <Navbar/> и <Sidebar/>. Каждому компоненту требуется корневой элемент для его JSX, и наиболее простым решением является использование <div>. Если поместить несколько компонентов один внутрь другого, полученный DOM будет состоять из десяти уровней анонимных оберток, хотя каждый отдельный компонент сам по себе казался разумным. (Если вы работаете с React, стоит помнить, что фрагмент полностью устраняет необходимость в обертке, когда она не требуется.)

Классы-вспомогательные функции сосредотачивают внимание на внешнем виде

CSS, ориентированный на функциональность, отлично подходит для ускорения работы, но сосредотачивает всё внимание на внешнем виде элемента. Когда маркировка выглядит как <div class="flex items-center space-x-4">, возникает вопрос «как это организовано?», но вопрос «что это такое?» так и не задаётся. Выбор элемента становится второстепенным.

Пиксели — это лишь верхний слой

Самая опасная привычка — оценивать свою работу по тому, что видит пользователь с мышью на большом мониторе. <div> с синим фоном, заокруглёнными углами и крупным шрифтом определённо выглядит как кнопка. Но под отрендеренными пикселями находятся DOM, дерево доступности, предоставляемое браузером вспомогательным технологиям, представление документа поисковыми роботами и механизм обработки ввода браузером. Для каждого из этих слоёв стилизованный div по-прежнему остаётся просто div.

Что на самом деле означает семантический HTML

«Семантический» означает, что элементы несут смысл. Семантический HTML — это практика использования элементов, названия которых описывают роль содержимого внутри них, чтобы браузер, технологии вспомогательного доступа и люди могли понимать документ без необходимости догадок.

Универсальные контейнеры

Два элемента преднамеренно не имеют смысла:

<div> — универсальный блочный контейнер для группировки элементов.
<span> — универсальный линейный контейнер для группировки элементов.

Текст внутри <div> может быть заголовком страницы, ссылкой на навигацию, абзацем из поста в блоге, примечанием в боковой панели или юридическим заявлением. Браузер не может это определить, поэтому обрабатывает все такие элементы одинаково.

Элементы, несущие смысл

Семантические элементы указывают, в чем заключается их содержимое:

<header> содержит вступительный контент страницы или раздела, часто включая навигацию.
<nav> обозначает блок основных навигационных ссылок.
<main> охватывает основной, уникальный контент страницы.
<article> представляет собой самостоятельную статью, такую как пост или новость.
<section> группирует контент по единой теме.
<aside> содержит материал, косвенно связанный с основным контентом, например боковую панель.
<footer> включает заключительную информацию, такую как авторство, авторские права или юридические ссылки.
<button> — это интерактивный элемент управления, выполняющий определённое действие.

Когда браузер встречает тег <article>, он понимает, что его содержимое может существовать самостоятельно. Когда он встречает тег <nav>, он понимает, что эти ссылки предназначены для навигации по сайту. Именно на этих знаниях основан остальной раздел данного руководства.

Четыре причины, по которым стоит тратить усилия на семантическую маркировку

Для выбора правильного элемента требуется немного времени на размышление, в то время как стилизованный div отображает те же пиксели. Положительные результаты проявляются в четырех аспектах.

Доступность: ориентиры и встроенные элементы управления

Многие люди используют Интернет с помощью скриптов чтения экрана, таких как NVDA, JAWS или VoiceOver, или навигируют исключительно с помощью клавиатуры. Скрипты чтения экрана игнорируют ваш CSS; они работают на основе дерева доступности, которое браузер формирует из вашего HTML.

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

Landmark Navigation Map:
- Header
- Navigation (3 links)
- Main Content
  - Heading 1: Stop Using Divs
  - Article
- Sidebar (Aside)
- Footer

Пользователь может нажать одну клавишу-сокращение, чтобы пропустить десятки ссылок на навигацию и сразу попасть в <main> или перейти непосредственно к статье. Теперь сравните ту же страницу, построенную исключительно из div:

Landmark Navigation Map:
- Division
  - Division
  - Division
- Division

На практике всё ещё хуже, чем предполагает этот скетч: обычные div вообще не являются важными элементами, поэтому список просто пуст. Пользователю приходится просматривать элементы страницы по одному, чтобы найти то, что ему нужно.

Кнопки демонстрируют ту же проблему, но в меньшем масштабе. Вот фиктивная кнопка рядом с настоящей:

<!-- BAD: Fake Button -->
<div class="my-button" onclick="submitForm()">Submit</div>

<!-- GOOD: Native Button -->
<button type="submit">Submit</button>

Встроенный элемент <button> предоставляет бесплатно:

Возможность получения фокуса, поэтому он отображается в порядке Tab.

Активация с помощью клавиш Enter и Space.

Правильная роль элемента, чтобы скрипт для чтения экрана объявлял что-то вроде «Отправить, кнопка», и пользователь понимал, что происходит действие.

Версия элемента div не может привлекать внимание, не реагирует на клавиатуру и читается как обычный текст без указаний на его интерактивность. Чтобы он вел себя корректно, потребуются параметры tabindex="0", role="button", обработчики нажатий клавиш Enter и Space, стили для состояния фокуса и обработка состояния отключения. Это много кода для воспроизведения того, что обычно уже предусмотрено платформой, причем не всегда идеально.

Поисковые системы: более четкое представление о странице

Роботы-поисковики, такие как Googlebot, по сути, являются специализированными читателями текста, которые пытаются понять суть каждой страницы. Семантическая структура предоставляет им полезные подсказки:

<h1> указывает на основную тему.
<main> отделяет уникальный контент от заголовка и подвалов, которые повторяются на каждой странице.
<article> обозначает отдельный фрагмент редакционного контента.
<nav> показывает структуру внутренних ссылок.

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

Обслуживаемость: маркировка, которая сама себя описывает

Код — это способ общения с другими разработчиками и с самим собой спустя месяцы. Рассмотрим две версии одного и того же макета. Первая полностью основана на именах классов:

<div class="top-bar">
  <div class="logo-box">...</div>
  <div class="menu-list">
    <div class="menu-item"><a href="#">Home</a></div>
    <div class="menu-item"><a href="#">Blog</a></div>
  </div>
</div>
<div class="wrapper">
  <div class="content-box">
    <div class="title-text">My Post</div>
    <div class="body-text">Hello world...</div>
  </div>
  <div class="right-bar">
    <div class="widget">...</div>
  </div>
</div>
<div class="bottom-bar">
  <div class="legal">© 2026</div>
</div>

Вторая версия отображает ту же структуру с использованием семантических элементов:

<header>
  <div class="logo">...</div>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>My Post</h1>
    <p>Hello world...</p>
  </article>
  <aside>
    <div class="widget">...</div>
  </aside>
</main>
<footer>
  <small>© 2026</small>
</footer>

В первой версии необходимо читать каждое имя класса, чтобы понять его назначение. Если кто-то пропустит или неправильно назовет класс, структура превратится в ряд идентичных блоков. Во второй версии форма страницы становится очевидной с первого взгляда: где она начинается (<header>), где находится основной контент (<main>), что является дополнением (<aside>) и где она заканчивается (<footer>). Обратите внимание, что навигация также превращается в настоящий список, что позволяет скрин-ридерам сообщать о количестве элементов в нем.

Автодескриптивный маркинг снижает умственную нагрузку во время ревью и уменьшает вероятность возникновения ошибок при изменении лейаута.

Производительность и встроенное поведение браузера

Браузерные движки, такие как Chromium, Gecko и WebKit, настроены для стандартных элементов, у которых уже реализованы стандартные стили, обработка событий и управление состоянием. Наиболее ярким примером являются элементы форм. <input type="email"> и <input type="date"> предоставляют пользователям мобильных устройств соответствующую клавиатуру на экране или встроенный выбрасчик дат, а <details> обеспечивает рабочий элемент для отображения дополнительной информации, причем всё это без использования стороннего JavaScript.

Каждый раз, когда вы создаёте выпадающий список или кнопку с использованием div и скриптов, вы передаёте дополнительный код по сети, увеличиваете размер пакета данных, повышаете нагрузку на процессор и аккумулятор устройства, а также создаёте ещё один компонент, который теперь необходимо обслуживать и тестировать. Чтобы узнать больше об этой концепции, ознакомьтесь с шестью встроенными функциями HTML, заменяющими распространённые библиотеки интерфейса на JavaScript.

Решение сложных семантических вопросов

Знание списка элементов — это простая часть. Настоящая путаница возникает из-за нескольких пар элементов, которые кажутся взаимозаменяемыми.

article или section

Это вопрос, по которому чаще всего спорят разработчики. Полезный тест: можно ли извлечь этот контент с страницы, разместить его на другом сайте, и он всё равно будет иметь полный смысл? Если да, используйте <article>. Если он имеет смысл только в своем текущем контексте, используйте <section>.

Хорошие кандидаты на использование <article>:

Статья в блоге или новостная заметка.
Один комментарий пользователя.
Карточка товара в сетке магазина.
Самостоятельный виджет, такой как панель с текущей погодой.

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

Хорошие кандидаты на использование <section>:

Раздел «О нас» на главной странице.
Глава в цифровой книге.
Раздел с особенностями на лендинг-странице.
Группа отзывов.

<section> объединяет контент по одной теме, поэтому он практически всегда должен начинаться с заголовка от <h2> до <h6>. Если вы не можете придумать подходящий заголовок, это, скорее всего, не раздел, и в таком случае более правильным выбором будет <div>.

Эти два элемента естественным образом взаимосвязаны. Статью можно разделить на разделы, каждый из которых имеет собственный заголовок:

<!-- Proper Nesting Example -->
<main>
  <!-- Main article describing a topic -->
  <article>
    <h1>Understanding Semantic HTML</h1>
    <p>Introductory paragraph...</p>

    <!-- Sections dividing the article into sub-topics -->
    <section>
      <h2>Why Accessibility Matters</h2>
      <p>Content about accessibility...</p>
    </section>

    <section>
      <h2>SEO Benefits</h2>
      <p>Content about SEO...</p>
    </section>
  </article>
</main>

Ссылка или кнопка

Путаница между ссылками и кнопками — одна из наиболее частых проблем с доступностью. Правило простое:

Используйте <a> с реальным значением href, когда при нажатии происходит изменение URL или переход пользователя на другую страницу или местоположение.
Используйте <button>, когда при нажатии происходит какая-либо действие на текущей странице: отправка данных, открытие модального окна, переключение меню или иное изменение состояния.

Оба вида ошибок встречаются часто, как и способы их исправления:

<!-- WRONG: A link styled like a button that triggers JavaScript -->
<a href="#" onclick="openModal()">Open Modal</a>

<!-- WRONG: A button that navigates to a new webpage -->
<button onclick="window.location.href='/about'">About Us</button>

<!-- RIGHT -->
<button type="button" onclick="openModal()">Open Modal</button>
<a href="/about">About Us</a>

Это различие важно, потому что скрин-читеры объявляют роль элемента. Тег «Link» создает ожидание, что местоположение изменится; тег «button» намекает на то, что здесь произойдет какое-то действие. Ошибка в выборе тега нарушает эти ожидания. Существуют также практические последствия: ссылка с href="#" может переместить страницу в верх, и ее нельзя активировать с помощью пробела, а кнопка для навигации не может открыться в новой вкладке или иметь свой адрес скопированным.

Создание логичной структуры заголовков

Заголовки формируют оглавление страницы, и от них зависят как вспомогательные технологии, так и поисковые роботы. Пользователи скрин-читеров часто навигируют, опираясь только на заголовки. Несколько правил помогают сохранить полезность этой структуры:

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

Также обратите внимание, что элемент <header> и элементы заголовков — это разные вещи. <header> представляет собой область страницы; элементы от <h1> до <h6> — это заголовки, которые формируют структуру оглавления.

Когда div — подходящий инструмент

Все это не означает, что использование <div> запрещено. У него есть важная функция: оборачивание контента исключительно для форматирования или стилизации, когда нет семантического смысла. Центрирование элементов с помощью flexbox, создание зазоров в сетке, настройка градиентного фона или использование анимаций CSS — все это веские причины для применения <div> (или <span> для встраиваемого контента).

В приведённой ниже карточке семантические элементы используются для значимых частей, в то время как один div служит лишь для размещения двух кнопок рядом:

<!-- PERFECTLY VALID USE OF A DIV -->
<article>
  <h1>Card Title</h1>
  <p>Card description goes here...</p>

  <!-- This div exists purely to align two buttons side-by-side with Flexbox -->
  <div class="button-group flex gap-4 mt-4">
    <button type="button">Save</button>
    <button type="button">Cancel</button>
  </div>
</article>

Элементы <article>, <h1>, <p> и <button> описывают содержимое; элемент <div> служит исключительно для формирования макета. Вся суть в одном предложении: используйте семантические элементы для передачи смысла, а div — для организации макета. (На реальной странице, где такая карточка находится внутри более крупного документа, её заголовок обычно будет <h2> или <h3>, чтобы соответствовать структуре страницы.)

Рефакторинг карточки поста блога, шаг за шагом

Рассмотрим компонент карточки, типичный для практически всех сайтов с контентом: изображение, метка, заголовок, автор и дата, отрывок текста и две кнопки. Вот версия с использованием div:

<div class="card">
  <div class="card-image">
    <img src="tech.jpg" alt="Technology background" />
    <div class="badge">Article</div>
  </div>
  <div class="card-content">
    <div class="post-title" onclick="goToPost()">10 Tips for Better Code</div>
    <div class="post-author">By Jane Doe</div>
    <div class="post-date">August 12, 2026</div>
    <div class="post-excerpt">
      Learn how to write cleaner, more maintainable frontend code today...
    </div>
    <div class="card-footer">
      <div class="share-btn" onclick="sharePost()">Share</div>
      <div class="read-more" onclick="goToPost()">Read More</div>
    </div>
  </div>
</div>

Проблемы легко перечислить, как только вы начнёте их искать:

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

Теперь переписанная версия:

<article class="card">
  <figure class="card-image">
    <img src="tech.jpg" alt="Abstract technology grid pattern" />
    <span class="badge">Article</span>
  </figure>

  <div class="card-content">
    <h2>
      <a href="/posts/10-tips-for-better-code">10 Tips for Better Code</a>
    </h2>

    <p class="meta-info">
      Written by <span class="author">Jane Doe</span> on
      <time datetime="2026-08-12">August 12, 2026</time>
    </p>

    <p class="post-excerpt">
      Learn how to write cleaner, more maintainable frontend code today...
    </p>

    <footer class="card-footer">
      <button type="button" onclick="sharePost()" aria-label="Share this article">
        Share
      </button>
      <a href="/posts/10-tips-for-better-code" class="btn-primary">
        Read More
      </a>
    </footer>
  </div>
</article>

Что изменилось и почему это помогает:

Оболочка <article> сообщает вспомогательным технологиям и поисковым роботам, что карточка является отдельным элементом.

Изображение и его значок группируются внутри <figure>, причем атрибут alt теперь описывает изображение, вместо того чтобы давать его общее название.

Заголовок представляет собой настоящий элемент <h2> с реальной ссылкой, поэтому он отображается в оглавлении, можно перейти к нему с помощью клавиши Tab, и информация о его местоположении становится доступной для поисковых роботов.

Дата указывается с помощью элемента <time datetime="2026-08-12">, что позволяет инструментам для сбора данных, перевода и интеграции с календарями использовать однозначное машинно-читаемое значение, независимо от формата видимого текста.

Кнопка «Поделиться» является элементом <button>, поскольку она выполняет действия на текущей странице, в то время как кнопка «Прочитать больше» — элементом <a>, так как она осуществляет переход.

Атрибут aria-label на кнопке обмена предоставляет пользователям скрин-ридеров дополнительную информацию о том, что будет обменено. Оставьте видимый текст внутри метки, как здесь («Share» является частью «Share this article»), чтобы пользователи, управляющие голосом, могли активировать её, произнеся то, что видят.

Одно усовершенствование, которое стоит рассмотреть: теперь в карточке содержатся две ссылки на один и тот же URL. Некоторые команды оставляют только ссылку с названием или делают всю карточку кликабельной через эту единственную ссылку, чтобы пользователи с клавиатурой и скрин-ридерами не попадали дважды в одно и то же место.

Привычки, которые сохраняют семантику вашего маркирования

Вам не нужно заново изучать веб-разработку, чтобы писать лучший HTML. Несколько рутинных проверок помогают выявить большинство проблем.

Проведите автоматизированный аудит

Расширения браузера, такие как axe DevTools или WAVE, доступные для Chrome и Firefox, сканируют страницу за секунды и выявляют проблемы, такие как недействительные атрибуты ARIA, отсутствующие типы кнопок, нарушенный порядок заголовков и интерактивные элементы без соответствующей семантики. Автоматизированные инструменты фиксируют лишь часть важных моментов, поэтому считайте чистый отчет лишь отправной точкой, а не доказательством доступности.

Попробуйте страницу без CSS

Отключите все стили либо через инструменты разработчика, либо с помощью расширения, отключающего CSS, и посмотрите, что останется. Остается ли это читаемым документом? Можете ли вы отличить заголовки от абзацев и найти навигацию? Если в результате получается неструктурированный блок текста, значит структура зависит от CSS для своего понимания. Хорошо структурированный документ остается упорядоченным даже без каких-либо стилей.

Отложите мышь в сторону

Попробуйте управлять своим приложением, используя только клавиши Tab, Shift + Tab, Enter, пробел и стрелки, и проверьте:

Возможно ли доступ к каждому интерактивному элементу.
Виден ли всегда тот элемент, который находится в фокусе.
Справляются ли с задачами формы, выпадающие списки и модальные окна.

Если вы столкнулись с элементом div, который игнорирует клавиши Enter или пробел, замените его на <button>. Это часто один из самых быстрых способов устранения проблем с доступностью.

Спросите, что представляет собой содержимое, прежде чем писать div

Прежде чем создавать новый контейнер, остановитесь и спросите себя, что на самом деле представляет его содержимое:

Для навигации используется <nav>.
Для боковой панели — <aside>.
Для кликабельной кнопки — <button>.
Для отдельной карточки или поста — <article>.

Основной контент страницы требует использования тега <main>.

Тег <div> используется только для обертки макета, не имеющей собственного значения.

То же самое касается компонентов: корневой элемент React-компонента является частью итогового документа, поэтому его выбор также требует тщательного подхода. Чтобы узнать больше о различиях между JSX и настоящим HTML, прочитайте JSX — это не HTML: реальные компромиссы при использовании маркировки компонентов.

Основные выводы

Отрендеренные пиксели — это лишь один слой; дерево доступности, поисковые роботы и обработка ввода браузером читают ваши элементы, а не стили.
Встроенные элементы, такие как <button>, <a>, <input> и <details>, обеспечивают фокус, поддержку клавиатуры, роли и поведение в мобильных устройствах, что требует значительных усилий при ручной реализации.
Используйте <article> для контента, имеющего самостоятельное значение, и <section> для тематической части более крупного целого, причем каждой секции необходимо указать заголовок.
Ссылки предназначены для навигации, а кнопки — для выполнения действий; их смешивание вводит пользователей в заблуждение и нарушает ожидаемое поведение браузера.
Сохраняйте четкую структуру заголовков без пропущенных уровней и используйте CSS вместо уровней заголовков для контроля размера.
Div остается оптимальным выбором для чистого форматирования. Фреймворки меняются каждые несколько лет, но эта основа используется уже десятилетиями, и маркировка, четко указывающая смысл элементов, приносит пользу как пользователям, так и поисковым системам, а также вашей команде.

← Все статьи Прислать бриф