Семантическая разметка HTML5: понятное руководство с примерами
Если вы вбили запрос вроде «семантическая разметка HTML5» и хотите быстро понять, какие теги использовать и зачем — вы по адресу. Ниже кратко и практично разберём ключевые семантические элементы, покажем, как ими заменить дивосуп, и дадим чеклист для проверки верстки перед релизом.
Что такое семантическая разметка
Семантическая разметка — это использование тегов по смыслу, а не ради стилей. Она улучшает читаемость кода, помогает SEO и повышает доступность (a11y). Поисковики и ассистивные технологии лучше понимают структуру страницы, если вы используете правильные теги.
Базовые семантические теги HTML5 и когда их применять
- <header> — вводная часть для страницы или секции: логотип, заголовок, краткое описание, интро.
- <nav> — блок навигации: основное меню, хлебные крошки, пагинация.
- <main> — основное уникальное содержание страницы. На странице должен быть только один <main>.
- <section> — тематический раздел с заголовком. Часто внутри страницы: блок «О нас», «Преимущества» и т. п.
- <article> — самостоятельный, самодостаточный блок, который можно распространять отдельно: пост, новость, отзыв, карточка статьи.
- <aside> — боковой или дополнительный контент: сайдбар, блок «Похожие статьи», промо-блоки.
- <footer> — нижняя часть страницы или секции: копирайт, ссылки, контакты.
Практика: «скелет» типичной страницы на семантике
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Магазин кофе — Главная</title>
<meta name="description" content="Кофе свежей обжарки. Доставка по России. Семантическая разметка и правильные теги HTML5.">
</head>
<body>
<a class="skip-link" href="#content">Перейти к содержимому</a>
<header class="site-header">
<div class="logo">CoffeeTime</div>
<nav aria-label="Основная навигация">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/catalog">Каталог</a></li>
<li><a href="/blog">Блог</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</nav>
</header>
<main id="content">
<section aria-labelledby="promo-title">
<h1 id="promo-title">Свежая обжарка каждую неделю</h1>
<p>Выбирайте зерно под любой способ заваривания.</p>
</section>
<section aria-labelledby="hits-title">
<h2 id="hits-title">Хиты продаж</h2>
<div class="grid">
<article>
<h3>Эфиопия Сидамо</h3>
<p>Яркая кислотность, ягоды, цитрус.</p>
<a href="/product/sidamo">Подробнее</a>
</article>
<article>
<h3>Колумбия Супремо</h3>
<p>Шоколад, орех, карамель.</p>
<a href="/product/colombia">Подробнее</a>
</article>
</div>
</section>
</main>
<aside aria-label="Промо и подписка">
<section>
<h2>Скидка 10% на первый заказ</h2>
<p>Подпишитесь на рассылку — получите промокод.</p>
</section>
</aside>
<footer class="site-footer">
<nav aria-label="Хлебные крошки">
<ol>
<li><a href="/">Главная</a></li>
<li aria-current="page">Магазин кофе</li>
</ol>
</nav>
<p>© 2025 CoffeeTime</p>
</footer>
</body>
</html>
Section или Article: как выбрать
Запомните простое правило: если блок «живёт» и понятен вне контекста страницы (можно отправить в RSS, закинуть в соцсети) — это <article>. Если это тематический раздел внутри страницы — <section>.
<!-- Неверно: статья оформлена как section -->
<section>
<h2>Как выбрать кофе для воронки</h2>
<p>...текст...</p>
</section>
<!-- Верно: самодостаточный материал -->
<article>
<h2>Как выбрать кофе для воронки</h2>
<p>...текст...</p>
</article>
Доступность и навигационные ориентиры (landmarks)
Теги <header>, <nav>, <main>, <aside>, <footer> создают «маяки» для экранных читалок. Если на странице несколько навигаций, различайте их с помощью aria-label. Добавляйте ссылку пропуска к основному контенту (skip link).
<header>
<nav aria-label="Навигация по сайту">...</nav>
<nav aria-label="Навигация по разделу">...</nav>
</header>
<a class="skip-link" href="#main">Сразу к контенту</a>
<main id="main">...</main>
Переводим «дивосуп» в семантику
<!-- Было -->
<div class="top">...логотип, меню...</div>
<div class="content">
<div class="block">...заголовок и текст...</div>
<div class="block">...карточка статьи...</div>
</div>
<div class="bottom">...контакты...</div>
<!-- Стало -->
<header>...</header>
<main>
<section>...</section>
<article>...</article>
</main>
<footer>...</footer>
Типичные ошибки и как их исправить
- Несколько <main> на странице. Должен быть один. Остальные блоки — <section> или <div>.
- <nav> без списка. Внутри меню используйте <ul>/<ol> для логичной структуры ссылок.
- <section> без заголовка. У раздела должен быть явный заголовок (<h2>/<h3>…). Если заголовок не нужен — возможно, достаточно <div>.
- Путаница article/section. Самодостаточный контент — <article>, тематическая группа — <section>.
- Дублирование ролей. Не назначайте role="navigation" для <nav>: элемент уже семантичен. Добавляйте role только когда семантики не хватает (например, для <div role="navigation"> в легаси-коде).
- Отсутствие skip link. Добавьте ссылку «Перейти к содержимому» для клавиатурной навигации и скринридеров.
Заголовки и SEO: короткие правила
- На странице один <h1> — главный смысл. Далее иерархия: <h2> для разделов, <h3> для подразделов и т. д.
- Текст заголовка должен описывать содержимое блока. Избегайте пустых «Маркетинговых» заголовков без смысла для поисковика.
- В <title> и <meta name="description"> используйте ключевые фразы, например: «Семантическая разметка HTML5 — руководство и примеры».
Мини‑чеклист перед публикацией
- Один <main> на страницу, корректные <header>/<footer> у страницы и крупных секций при необходимости.
- <nav> снабжён aria-label, если навигаций несколько; ссылки упорядочены списком.
- <section> имеет заголовок; самодостаточные блоки — <article>.
- Есть «skip link» к основному контенту, логичная иерархия h1–h6.
- Описание в <meta name="description"> отражает суть страницы и включает ключ «семантическая разметка HTML5».
Что дальше
Освоение семантики — база для чистой, поддерживаемой и доступной вёрстки. Хотите быстро закрепить знания на практике, сверстать несколько страниц и получить обратную связь? Попробуйте интенсив: Прокачать HTML и вёрстку на практике (пошаговый курс с проектами).
Итог: используйте теги по смыслу, проверяйте иерархию заголовков и добавляйте ориентиры для доступности. Так ваш HTML станет понятным людям, поисковикам и вам самим через полгода после релиза.
-
Создано 01.10.2025 17:01:52
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.