Semantic HTML

Semantic HTML (семантическая разметка) — это подход к вёрстке, при котором теги описывают смысл содержимого, а не только его внешний вид. Вместо универсальных <div> используют значимые элементы: <header>, <nav>, <article>, <footer>. Так и браузер, и поисковик, и скринридер понимают структуру страницы.

Простыми словами: обычный <div> — это безликая коробка «что-то тут есть». Семантический тег — коробка с подписью: «это шапка», «это меню», «это статья». Роботу сразу видно, что внутри.

Что такое Semantic HTML и зачем он нужен

До HTML5 страницы строили в основном из <div> и <span> — тегов без всякого смысла. HTML5, ставший рекомендацией W3C в 2014 году, добавил семантические элементы: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>. Каждый явно говорит, какую роль играет блок.

Зачем это для SEO и не только. Поисковик лучше понимает, где основной контент, а где навигация или «подвал», — и точнее оценивает страницу. А ещё семантическая разметка — фундамент доступности: скринридеры незрячих пользователей ориентируются именно по этим тегам.

Как используется

• <header> — шапка страницы или секции.
• <nav> — блок навигации, меню.
• <main> — основной уникальный контент (один на страницу).
• <article> — самодостаточный материал: статья, карточка товара.
• <aside> — боковой, дополнительный контент.
• <footer> — «подвал» с контактами и копирайтом.

Синтаксис и пример кода

Плохо (несемантично):

<div class="header">...</div>
<div class="menu">...</div>
<div class="content">...</div>

Хорошо (семантично):

<header>...</header>
<nav>...</nav>
<main>
  <article>...</article>
</main>
<footer>...</footer>

Пример

Статья блога, обёрнутая в <article> с заголовком <h1> внутри, даёт Google чёткий сигнал: вот цельный материал. В сочетании с микроразметкой это повышает шансы на расширенные сниппеты — тогда как «стена» из <div> оставляет поисковик догадываться.

Часто путают с…

• Обычный HTML на <div> — визуально страница та же, но смысла в коде нет.
• Schema.org / микроразметка — это дополнительный слой данных для поисковиков; семантические теги — базовая структура самого HTML.

Вопросы и ответы

Влияет ли Semantic HTML на SEO?

Да, косвенно: он помогает поисковику понять структуру и основной контент страницы. Это не «фактор №1», но часть здоровой технической базы.

Чем семантические теги лучше div?

Они несут смысл: браузер, поисковик и скринридер сразу видят роль блока. Код становится понятнее и доступнее.

Какие основные семантические теги HTML5?

header, nav, main, article, section, aside, footer — все они появились в HTML5 (рекомендация W3C 2014 года).

Вёрстка сайта — сплошные div без структуры? Наведём порядок в коде — исправление ошибок на сайте и SEO-аудит.

Похожие термины: HTML, Доступность, Semantic SEO, Schema.org.