Семантические теги описывают смысл содержимого, а не только его внешний вид. Браузер визуально не отличит <div> от <article> — оба блочные. Но поисковик, экранная читалка и следующий разработчик, открывший ваш код, поймут структуру страницы сразу.
Что такое семантика в HTML
Сравните два варианта разметки:
<!-- Без семантики — всё div-ы -->
<div class="header">
<div class="nav">...</div>
</div>
<div class="main">
<div class="post">...</div>
<div class="sidebar">...</div>
</div>
<div class="footer">...</div>
<!-- С семантикой -->
<header>
<nav>...</nav>
</header>
<main>
<article>...</article>
<aside>...</aside>
</main>
<footer>...</footer>
Второй вариант передаёт структуру через сами теги, а не через классы.
Основные семантические теги
<header>
Вводный блок страницы или раздела. Обычно содержит логотип, заголовок сайта и главную навигацию.
<header>
<a href="/" class="logo">DevBlog</a>
<nav>
<ul>
<li><a href="/posts/">Статьи</a></li>
<li><a href="/about/">Обо мне</a></li>
</ul>
</nav>
</header>
<header> может быть внутри <article> — тогда это заголовок конкретной статьи, а не всего сайта.
<nav>
Блок основной навигации. Не каждая группа ссылок — <nav>, а только та, что обеспечивает навигацию по сайту или по странице.
<nav aria-label="Основное меню">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/posts/">Статьи</a></li>
<li><a href="/tags/">Теги</a></li>
</ul>
</nav>
<main>
Основное уникальное содержимое страницы. На странице должен быть только один <main>. Шапка, подвал и боковая панель в <main> не входят.
<main>
<!-- Всё, что уникально для этой страницы -->
</main>
<article>
Самостоятельный, независимый фрагмент контента: пост блога, статья, карточка товара, комментарий. Можно вырвать из контекста и он останется понятным.
<article>
<header>
<h2><a href="/posts/asyncio/">Полное руководство по asyncio</a></h2>
<time datetime="2025-03-15">15 марта 2025</time>
</header>
<p>Разбираем event loop, корутины и практические паттерны...</p>
<footer>
<a href="/posts/asyncio/">Читать далее</a>
</footer>
</article>
<section>
Тематический раздел контента. В отличие от <article> не является самостоятельным — это часть большего целого.
<section id="recent-posts">
<h2>Последние статьи</h2>
<!-- карточки постов -->
</section>
<section id="popular-tags">
<h2>Популярные теги</h2>
<!-- облако тегов -->
</section>
Каждый <section> желательно начинать с заголовка.
<aside>
Контент, косвенно связанный с основным: боковая панель, рекламный блок, ссылки «Похожие статьи», цитата.
<aside>
<h3>Похожие статьи</h3>
<ul>
<li><a href="/posts/generators/">Генераторы Python</a></li>
<li><a href="/posts/contextmanager/">Context Manager</a></li>
</ul>
</aside>
<footer>
Нижний колонтитул страницы или раздела: копирайт, ссылки, контакты.
<footer>
<p>© 2025 DevBlog. Написано на Python.</p>
<nav aria-label="Ссылки подвала">
<a href="/privacy/">Конфиденциальность</a>
<a href="/rss.xml">RSS</a>
</nav>
</footer>
<time>
Машиночитаемая дата и время. Атрибут datetime содержит стандартный формат:
<time datetime="2025-03-15">15 марта 2025</time>
<time datetime="2025-03-15T10:30:00+03:00">15 марта в 10:30</time>
Почему это важно
| Причина | Объяснение |
|---|---|
| SEO | Google лучше понимает структуру контента |
| Доступность | Скринридеры показывают пользователю список ориентиров (nav, main, aside) |
| Читаемость кода | Структура ясна без просмотра классов |
| Производительность | Нет — семантика не влияет на скорость |
Полный пример: страница DevBlog
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>DevBlog — заметки Python-разработчика</title>
</head>
<body>
<header>
<a href="/" class="logo">DevBlog</a>
<nav aria-label="Основное меню">
<ul>
<li><a href="/posts/">Статьи</a></li>
<li><a href="/about/">Обо мне</a></li>
</ul>
</nav>
</header>
<main>
<section id="recent-posts">
<h1>Последние статьи</h1>
<article>
<header>
<h2><a href="/posts/asyncio/">Руководство по asyncio</a></h2>
<time datetime="2025-03-15">15 марта 2025</time>
</header>
<p>Event loop, корутины и практические паттерны.</p>
</article>
<article>
<header>
<h2><a href="/posts/pydantic-v2/">Pydantic v2: что нового</a></h2>
<time datetime="2025-02-28">28 февраля 2025</time>
</header>
<p>Разбираем ключевые изменения в Pydantic v2.</p>
</article>
</section>
<aside>
<h2>Теги</h2>
<ul>
<li><a href="/tags/python/">Python</a></li>
<li><a href="/tags/fastapi/">FastAPI</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 DevBlog</p>
</footer>
</body>
</html>
Используйте <div> только тогда, когда ни один семантический тег не подходит. Если вы тянетесь за <div> — остановитесь и спросите: «Что это по смыслу?» Обычно подходящий тег найдётся.
💬 Комментарии (0)
Комментариев пока нет
Станьте первым, кто поделится мнением об этой статье!