Семантический HTML: какие теги использовать и почему они важны для доступности, Google и ИИ

Браузер отображает <div> и <nav> одинаково. Разница в смысле: семантический HTML сообщает любой программе, читающей страницу, какую роль играет каждый блок. MDN определяет его как использование элементов в соответствии с их значением, а не внешним видом по умолчанию. От этого смысла выигрывают поисковые системы, вспомогательные технологии и роботы, которые собирают данные для ИИ-моделей.

Какие основные семантические теги HTML существуют?

Стандарт HTML определяет десятки элементов. Вот те, что структурируют почти любую контентную страницу:

Теги уровня текста тоже несут смысл: <strong> для важности, <em> для выделения, <blockquote> и <cite> для цитат, <ul> и <ol> для списков, <a> для ссылок и <button> для действий.

Почему семантический HTML важен для доступности?

Программы чтения с экрана строят карту страницы по её тегам. Ориентиры <header>, <nav>, <main>, <aside> и <footer> позволяют пользователю сразу перейти к меню или к содержимому, а список заголовков работает как оглавление. Руководства W3C по доступности о структуре страницы рекомендуют эти области и логичный порядок заголовков именно поэтому.

Кликабельный <div> невидим для клавиатуры и нем для программы чтения с экрана, если вручную не воссоздать то, что нативный <button> даёт бесплатно. Нативные элементы приходят с собственной ролью, фокусом клавиатуры и ожидаемым поведением. Во многих странах доступность государственных и коммерческих сайтов к тому же является юридическим требованием, поэтому чистая разметка становится ещё и вопросом соответствия закону.

Помогает ли семантический HTML в SEO?

Google никогда не называл семантические теги прямым фактором ранжирования, и страница из одних <div> может ранжироваться. Польза косвенная, но реальная:

• Определение основного содержимого: <main> и <article> помогают отделить важный текст от меню, боковых колонок и подвалов, которые повторяются на каждой странице.
• Тематическая структура: упорядоченная иерархия заголовков показывает, что охватывает страница и как связаны её части, что поддерживает релевантность по длинным запросам.
• Более точное понимание элементов: настоящие таблицы, списки и даты читать проще, чем визуальные имитации из стилизованных блоков.
• Согласованность со структурированными данными: семантическая разметка и JSON-LD описывают одну и ту же страницу с двух сторон. Наша статья о структурированном контенте показывает, как они сочетаются.

Семантический HTML входит в техническое SEO так же, как аккуратные URL или быстрые страницы: это основа, благодаря которой ваш контент читается правильно.

Как ИИ-ассистенты используют структуру страницы?

ChatGPT, Gemini, Perplexity и Google AI Overviews цитируют не целые страницы, а выбирают фрагменты. Роботы, загружающие вашу страницу, обычно отбрасывают навигацию и шаблонный текст, а затем нарезают остальное на блоки. Раздел, который начинается с понятного <h2>, отвечает на свой вопрос в первом абзаце и умещается в одном <section>, даёт чистый блок. Тот же контент, разбросанный по вложенным <div> с заголовками, имитированными жирным шрифтом, даёт фрагменты вперемешку с пунктами меню. Наше руководство по разбиению контента на блоки объясняет, как писать разделы, переживающие такую нарезку.

Как выглядит хорошо структурированная страница статьи?

Вот скелет статьи блога, описанный тег за тегом:

1. <header> содержит логотип и <nav> с главным меню. Этот блок повторяется на каждой странице, поэтому роботы учатся его игнорировать.

2. Сразу за ним открывается <main>. В нём находится один <article>, то есть контент, который вы хотите проиндексировать и увидеть в цитатах.

3. Внутри <article> элемент <header> объединяет <h1> (тему страницы), имя автора и элемент <time datetime="2026-10-18"> с датой публикации в машиночитаемом формате.

4. Каждая часть статьи оформляется как <section>, начинающийся с <h2>, сформулированного как вопрос, на который он отвечает, а затем идут абзацы <p>, списки <ul> или <table> с заголовками <th>.

5. График помещается в <figure> с <img>, у которого есть описательный альтернативный текст, и <figcaption>, поясняющий, что показывает график.

6. Похожие ссылки размещаются в <aside>, вне основного потока статьи.

7. <footer> завершает страницу юридическими ссылками и контактами.

При такой структуре пользователь программы чтения с экрана переходит к содержимому одним нажатием клавиши, Google видит одну главную статью с чёткой структурой, а ИИ-робот может взять любой <section> как самостоятельный ответ.

Какие ошибки семантического HTML встречаются чаще всего?

• Div везде: конструкторы страниц часто выдают слои <div> без ориентиров. Проверьте, что существует хотя бы <main> и что он оборачивает содержимое.
• Пропущенные или неправильно используемые заголовки: переход от <h2> сразу к <h4>, использование заголовков, чтобы увеличить текст, или жирные абзацы вместо заголовков. Выбирайте уровень по структуре, а оформляйте с помощью CSS.
• Несколько конкурирующих <h1>: HTML это допускает, но один <h1>, описывающий тему страницы, остаётся самым ясным сигналом для пользователей и поисковых систем.
• Кликабельные <div> и <span>: используйте <a> для навигации и <button> для действий.
• Таблицы для вёрстки и ненастоящие таблицы: таблицы нужны для данных; данные, показанные в стилизованных блоках, теряют связи между строками и столбцами.
• Изображения с текстом: заголовок или цену внутри картинки не прочитает ни робот, ни программа чтения с экрана.
• Даты только обычным текстом: добавьте <time> с атрибутом datetime, чтобы дата читалась однозначно.

Как проверить семантическую структуру страницы?

Три быстрые проверки закрывают большинство проблем. Во-первых, выведите структуру заголовков страницы и прочитайте только её: она должна рассказывать историю контента. Во-вторых, найдите в исходном коде <main>, <nav> и <article>. В-третьих, пройдите по странице только с помощью клавиатуры и проверьте, доступны ли все ссылки и кнопки. Наш аудит внутренней SEO-оптимизации перечисляет проблемы заголовков и разметки для любого URL, а бесплатное расширение Sorank для Chrome показывает структуру заголовков просматриваемой страницы.

Используйте каждый тег по его значению: один <main>, один <h1>, упорядоченные разделы и настоящие таблицы дают людям, Google и ИИ одну и ту же чёткую карту вашей страницы. Когда структура в порядке, контент всё равно нужно регулярно писать и публиковать: Sorank пишет и публикует оптимизированные статьи для Google и ИИ на autopilot.