Семантическая разметка HTML5: понятное руководство с примерами
Если вы вбили запрос вроде «семантическая разметка HTML5» и хотите быстро понять, какие теги использовать и зачем — вы по адресу. Ниже кратко и практично разберём ключевые семантические элементы, покажем, как ими заменить дивосуп, и дадим чеклист для проверки верстки перед релизом.
Что такое семантическая разметка
Семантическая разметка — это использование тегов по смыслу, а не ради стилей. Она улучшает читаемость кода, помогает SEO и повышает доступность (a11y). Поисковики и ассистивные технологии лучше понимают структуру страницы, если вы используете правильные теги.
Базовые семантические теги HTML5 и когда их применять
Практика: «скелет» типичной страницы на семантике
<!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>
Типичные ошибки и как их исправить
Заголовки и SEO: короткие правила
Мини‑чеклист перед публикацией
Что дальше
Освоение семантики — база для чистой, поддерживаемой и доступной вёрстки. Хотите быстро закрепить знания на практике, сверстать несколько страниц и получить обратную связь? Попробуйте интенсив: Прокачать HTML и вёрстку на практике (пошаговый курс с проектами).
Итог: используйте теги по смыслу, проверяйте иерархию заголовков и добавляйте ориентиры для доступности. Так ваш HTML станет понятным людям, поисковикам и вам самим через полгода после релиза.
