Что такое семантическая вёрстка
Семантическая вёрстка — это использование HTML‑элементов в соответствии с их смыслом. Заголовок становится h1 или h2, абзац — p, навигация — nav, основное содержимое — main, самостоятельный материал — article. CSS отвечает за внешний вид, HTML — за назначение элемента в документе
Разница заметна не только разработчику. Браузер строит из HTML дерево доступности, программы экранного доступа получают ориентиры, а поисковые системы видят более явные границы контента. При этом div и span не запрещены: они подходят для обёрток, у которых нет собственного смыслового назначения
- header — вводная часть страницы или отдельного раздела;
- nav — значимый набор навигационных ссылок;
- main — уникальное основное содержимое страницы;
- article — самостоятельный материал, который имеет смысл отдельно от окружения;
- section — тематический раздел, обычно с собственным заголовком;
- aside — связанное, но второстепенное содержимое;
- footer — завершающая информация страницы или раздела
<!-- Смысл приходится угадывать по классам -->
<div class="header">
<div class="menu">...</div>
</div>
<div class="content">...</div>
<!-- Назначение основных областей видно из HTML -->
<header>
<nav aria-label="Основная навигация">...</nav>
</header>
<main>
<article>...</article>
</main>Как семантическая вёрстка связана с SEO
Связь есть, но её часто преувеличивают. Яндекс рекомендует оформлять H1–H6 в соответствии с иерархией документа: так пользователю проще ориентироваться, а роботу — разбираться со структурой. Google прямо пишет, что семантический порядок заголовков полезен для программ экранного доступа, но для поиска нет магической последовательности или идеального количества заголовков
Поэтому корректная формулировка такая: semantic HTML помогает поисковой системе извлечь и сопоставить части документа, снижает риск неясной структуры и улучшает доступность. Само наличие main, article или section не гарантирует индексацию, релевантность и место в топе
Косвенный эффект тоже важен. Осмысленную разметку легче поддерживать, проверять и переиспользовать. В ней реже превращают кнопку в некликабельный div, теряют доступную ссылку или случайно делают визуальный подзаголовок обычным текстом
Заголовки H1, H2 и H3: рабочая иерархия
H1 описывает основную тему страницы, H2 делят её на крупные смысловые блоки, H3 раскрывают подраздел внутри конкретного H2. Уровень выбирают по вложенности, а размер и начертание задают CSS. Нельзя выбирать H4 только потому, что он визуально меньше
Стандарт допускает несколько H1, а Google способен обработать несовершенную иерархию. Но для коммерческого сайта один содержательный H1 остаётся самым предсказуемым правилом: автору, пользователю, разработчику и аудитору проще понять, какая тема главная
Ключевой запрос не нужно повторять в каждом подзаголовке. Заголовки должны кратко обозначать вопросы, на которые отвечает раздел. Переспам ухудшает чтение и не создаёт дополнительной ценности
- не используйте H1–H6 для пунктов меню, цены или декоративной подписи;
- не оставляйте заголовок пустым и не прячьте в нём важный текст только через CSS;
- не перескакивайте с H2 на H4 без смыслового уровня между ними;
- проверяйте, понятна ли структура страницы по одному списку заголовков
<h1>Разработка интернет-магазина под ключ</h1>
<h2>Что входит в разработку</h2>
<h3>Каталог и карточка товара</h3>
<h3>Оплата и доставка</h3>
<h2>Стоимость интернет-магазина</h2>
<h3>Что влияет на смету</h3>
<h2>Этапы запуска</h2>Параграфы, списки, ссылки и кнопки
Каждая законченная мысль оформляется отдельным p, а не переносами br внутри одного длинного блока. Перечень однородных пунктов размечается ul, последовательность действий — ol. Табличные данные требуют table с понятными заголовками столбцов, а не сетки из div
Переход на другую страницу — это ссылка a с настоящим href. Действие в текущем интерфейсе — button. Кликабельный div без клавиатурного управления и доступного имени создаёт проблемы пользователям и не заменяет обычную индексируемую ссылку
Выделение тоже должно иметь смысл. strong обозначает важность, em — смысловое ударение. Если нужен только жирный или курсивный стиль без смыслового акцента, это решается через CSS
- p — связный абзац, а не отступ вокруг любого текста;
- ul и ol — реальные перечни и этапы;
- a href — переход к индексируемому документу или разделу;
- button — отправка формы, открытие меню или другое действие;
- figure и figcaption — иллюстрация, схема или пример с подписью;
- time с datetime — дата в машиночитаемом формате
Main, article, section, nav и aside без путаницы
На странице обычно один видимый main: в нём находится уникальный контент, ради которого открыт URL. Повторяющиеся шапка, основное меню и подвал остаются снаружи. Это создаёт понятный ориентир для программ экранного доступа и режимов чтения
Article подходит для самостоятельной единицы: статьи блога, новости, карточки публикации или сообщения форума. Section группирует часть одной темы. Если блоку нельзя дать содержательный заголовок, возможно, это обычная техническая обёртка div, а не section
Nav нужен не вокруг любого набора ссылок, а вокруг заметной навигации: главного меню, оглавления, пагинации. Aside содержит дополнение к основному материалу — например, определение, связанные материалы или примечание — и не должен становиться свалкой для всех боковых блоков
Что влияет сильнее набора HTML5-тегов
Семантика не компенсирует страницу, которая закрыта от индексации, отвечает ошибочным статусом, дублирует чужой материал или не отвечает на запрос. Поисковое продвижение начинается с доступности URL, соответствия интенту и полезного содержимого
Title и видимые заголовки могут участвовать в формировании заголовка результата поиска. Яндекс также использует description и текст страницы для сниппета. Но поисковик может выбрать другой фрагмент, если он точнее соответствует запросу
Проверьте, какое содержимое получает поисковый робот. Критичный текст, H1 и обычные ссылки не должны появляться только после действия пользователя или клиентской загрузки данных. Это не запрет на JavaScript, а требование к доступности индексируемого содержания
- HTTP‑статус 200 для рабочей страницы и 404 для отсутствующей;
- уникальные title, description, H1 и основной текст;
- self-canonical и отсутствие случайного noindex;
- внутренние ссылки с понятными анкорами;
- соответствие страницы поисковому намерению;
- скорость, мобильная пригодность и стабильный интерфейс;
- структурированные данные, совпадающие с видимым контентом
Пример семантической страницы услуги
Ниже — упрощённый каркас страницы разработки сайта. Он не является универсальным шаблоном: состав блоков зависит от услуги и намерения пользователя. Важен принцип — у областей, заголовков, текста, списка и действия есть понятное назначение
Schema.org добавляется отдельным JSON-LD и не заменяет видимую HTML‑структуру. Микроразметка должна описывать только то, что действительно присутствует на странице
<header>
<a href="/" aria-label="Дмитрий Борисенко — главная">Дмитрий Борисенко</a>
<nav aria-label="Основная навигация">
<a href="/razrabotka-sajtov/">Сайты</a>
<a href="/price/">Цены</a>
</nav>
</header>
<main>
<article>
<header>
<h1>Разработка сайтов для бизнеса</h1>
<p>Проектирую, запускаю и поддерживаю сайт.</p>
<a href="/kontakty/#brief">Обсудить задачу</a>
</header>
<section aria-labelledby="result-title">
<h2 id="result-title">Что получит бизнес</h2>
<ul>
<li>Индексируемые страницы услуг</li>
<li>Формы и аналитика</li>
<li>Документация для поддержки</li>
</ul>
</section>
<section aria-labelledby="price-title">
<h2 id="price-title">Стоимость разработки</h2>
<p>Оценка зависит от шаблонов и интеграций.</p>
</section>
</article>
</main>
<footer>
<a href="/privacy/">Политика конфиденциальности</a>
</footer>Чек‑лист перед публикацией страницы
Проверка начинается не с валидатора, а с содержания. Откройте страницу без стилей и посмотрите, сохраняется ли понятный порядок. Затем изучите список заголовков, клавиатурную навигацию, исходный HTML и технические метаданные
Автоматический аудит находит часть ошибок, но не определяет, правильно ли назван раздел и отвечает ли текст на вопрос пользователя. Финальное решение требует ручного просмотра на десктопе, телефоне и с отключённым JavaScript там, где это уместно
- на странице есть один ясный основной H1;
- H2 и H3 образуют понятную вложенную структуру;
- каждый section имеет объяснимую тему и обычно заголовок;
- основной контент находится внутри main;
- ссылки имеют href и описательный текст;
- интерактивные действия реализованы кнопками и доступны с клавиатуры;
- изображения получают уместный alt, декоративные изображения — пустой alt;
- title, description и canonical уникальны для URL;
- важный текст и ссылки присутствуют в серверном HTML;
- страница отвечает правильным HTTP‑статусом и включена во внутреннюю перелинковку
Как проверить семантику сайта
Проверяю, что основной заголовок, текст, навигация и ссылки доступны посетителю и поисковому роботу. Формы, калькуляторы и другие интерактивные элементы должны дополнять содержание, сохраняя доступ к важной информации
Для каждого индексируемого URL задаются собственные metadata и canonical, страницы попадают в sitemap, а BlogPosting, Service и BreadcrumbList отражают видимый контент. После публикации изменений проверяю заголовки, JSON-LD, статусы, мобильную версию и реальные внутренние ссылки
Этот подход не обещает первое место: позиции зависят от спроса, конкуренции, качества ответа, доверия и внешних сигналов. Он создаёт техническую основу, на которой SEO можно развивать без переделки всего сайта
