Урок 6.1: Семантическая вёрстка
Учимся писать HTML, который понимают не только браузеры, но и люди
Что такое семантический тег?
Слово «семантика» пришло из лингвистики — это наука о смысле. Семантический тег — это тег, который несёт информацию не только о том, как отобразить содержимое, но и о том, что именно находится внутри.
Вспомните тег <b> и тег <strong>. Визуально они выглядят одинаково — жирный текст. Но:
<b>— просто жирное начертание. Никакого смысла.<strong>— важность. Скринридеры выделят этот текст интонацией.
То же самое с <i> (курсив) и <em> (логическое ударение). Семантические теги — это теги, которые объясняют, что находится внутри: шапка, меню, статья, подвал, навигация, раздел.
Раньше, в 2000-е, веб-разработчики верстали страницы так:
<div id="header">
<div class="logo">Мой сайт</div>
<div class="nav">
<div class="menu-item">Главная</div>
<div class="menu-item">О нас</div>
</div>
</div>
<div id="content">
<div class="post">
<div class="post-title">Заголовок</div>
<div class="post-body">Текст...</div>
</div>
</div>
<div id="footer">
<div class="copyright">2026 Все права защищены</div>
</div>Это работает, но это «верстка табуретками». Вместо того чтобы сказать «это навигация», мы говорим «это див с классом nav». Браузер, поисковик, скринридер — они не понимают, что это навигация. Они просто видят блок.
Современный, семантический подход:
<header>
<div class="logo">Мой сайт</div>
<nav>
<a href="/">Главная</a>
<a href="/about">О нас</a>
</nav>
</header>
<main>
<article>
<h1>Заголовок</h1>
<p>Текст...</p>
</article>
</main>
<footer>
<p>2026 Все права защищены</p>
</footer>Чувствуете разницу? Теперь сами теги говорят о том, что внутри. <header> — шапка. <nav> — навигация. <main> — главное содержимое. <article> — статья. <footer> — подвал.
Зачем нужна семантическая вёрстка?
1. SEO (поисковая оптимизация)
Google и Яндекс — это программы, которые читают ваш HTML. У них нет глаз, они не видят, как красиво выглядит страница. Они видят только код. И они обучаются распознавать семантические теги.
Когда поисковик видит <article>, он понимает: «Ага, это самостоятельный материал, его можно показывать в поиске». Когда видит <nav>: «Это навигация по сайту, не буду её индексировать как основной контент».
Когда видит <h1> — это главный заголовок страницы, самое важное ключевое слово. А <h2> — подзаголовки разделов.
📈 Реальный пример
Два интернет-магазина продают одинаковые товары. Один свёрстан дивами, второй — семантически. У второго — выше позиции в поиске, потому что Google лучше понимает структуру его страниц. Это не теория — это подтверждённые практикой кейсы.
2. Доступность (a11y)
Миллионы людей по всему миру пользуются скринридерами — программами, которые озвучивают содержимое экрана. Не потому что не видят, а потому что так удобнее (например, за рулём).
Скринридеры ориентируются на семантику. Когда они встречают <nav>, они говорят: «Навигация, 5 ссылок». Когда <article>: «Статья, заголовок такой-то». Пользователь может перепрыгивать между разделами, как по главам книги.
Если вся страница свёрстана дивами — скринридер просто прочитает текст подряд. Представьте, что книгу без оглавления и абзацев читают вслух — сплошной поток слов. Неудобно, правда?
3. Читаемость кода и поддержка
Вы пишете код один раз, а читают его десятки раз — вы сами через месяц, ваши коллеги, новый разработчик, который пришёл в проект. Семантические теги — это как хорошие комментарии, только лучше: они сами по себе документируют структуру.
Сравните два фрагмента:
<!-- Несемантически -->
<div class="footer">
<div class="footer-columns">
<div class="footer-col">...</div>
<div class="footer-col">...</div>
</div>
</div>
<!-- Семантически -->
<footer>
<div class="footer-columns">
<section>...</section>
<section>...</section>
</div>
</footer>Второй вариант сразу понятен: это подвал сайта, внутри — разделы. Первый вариант: «какой-то див с классом footer, внутри ещё дивы...».
4. Будущее и стандарты
HTML развивается. Семантические теги появились в спецификации HTML5 (2014 год). Сегодня это стандарт. Завтра появятся новые возможности, которые будут опираться на семантику. Если ваш код уже семантичен — вы готовы к будущему. Если нет — придётся переписывать.
Основные семантические теги
Давайте разберём каждый тег подробно, с примерами и пояснениями.
<header> — шапка сайта или раздела
Тег <header> обозначает вводную часть: шапку сайта, заголовок раздела, предисловие к статье. Может содержать логотип, название, навигацию, поиск.
Важно: <header> может быть несколько на странице. Например, один — шапка всего сайта, другой — заголовок внутри статьи.
<header>
<img src="logo.svg" alt="Логотип компании">
<h1>Название сайта</h1>
<p>Краткое описание, слоган</p>
</header>
<article>
<header>
<h2>Заголовок статьи</h2>
<time datetime="2026-06-24">24 июня 2026</time>
<p>Автор: Иван Петров</p>
</header>
<p>Текст статьи...</p>
</article><nav> — навигация
Внутри <nav> помещают основные ссылки для навигации по сайту или по разделу. Не все ссылки должны быть в nav — только самые важные блоки ссылок.
<nav>
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/blog">Блог</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</nav>Обратите внимание: навигацию обычно делают списком (<ul> + <li>), потому что это логически — список ссылок. Но это не строгое требование.
<main> — главное содержимое (один на страницу)
<main> — уникальный тег. Он может встречаться на странице только один раз. Внутри — основное содержимое страницы, уникальное для неё. То, что не повторяется на других страницах (шапка, подвал, боковая панель — повторяются, поэтому они не в main).
<body>
<header>...</header>
<main>
<h1>Добро пожаловать!</h1>
<p>Это уникальный контент страницы...</p>
</main>
<footer>...</footer>
</body><section> — раздел
<section> группирует связанное содержимое. Обычно внутри есть заголовок (<h1>–<h6>).
Представьте, что страница — это книга. <section> — это глава. У каждой главы есть название.
<section>
<h2>Наши услуги</h2>
<div class="services-grid">
<div class="service">
<h3>Веб-разработка</h3>
<p>Создаём сайты любой сложности</p>
</div>
<div class="service">
<h3>SEO-продвижение</h3>
<p>Выводим в топ поисковых систем</p>
</div>
</div>
</section><article> — самостоятельная статья или новость
<article> — это содержимое, которое можно «вынуть» из страницы и оно не потеряет смысла. Новость, пост в блоге, комментарий, карточка товара.
Главное свойство article — самодостаточность. Если вы захотите опубликовать этот блок на другом сайте или в RSS-ленте — он должен быть понятен.
<article>
<h2>Google представил новую нейросеть</h2>
<p><time datetime="2026-06-20">20 июня 2026</time></p>
<p>Компания Google анонсировала новую модель...</p>
<a href="/news/google-ai">Читать далее</a>
</article>Внутри article могут быть свои header, footer, section — всё как на полноценной странице.
<aside> — боковая панель
<aside> содержит информацию, косвенно связанную с основным контентом. Боковая панель, блок «похожие статьи», реклама, цитата.
<aside>
<h3>Интересные статьи</h3>
<ul>
<li><a href="#">Как учить верстку</a></li>
<li><a href="#">CSS Grid vs Flexbox</a></li>
</ul>
</aside><footer> — подвал
<footer> — заключительная часть: копирайт, контакты, ссылки на соцсети, карта сайта.
<footer>
<p>© 2026, Учебный центр. Все права защищены.</p>
<nav>
<a href="/privacy">Политика конфиденциальности</a>
<a href="/terms">Условия использования</a>
</nav>
</footer>Визуальная схема семантической страницы
Вот так выглядит типичная семантическая страница:
Логотип + Название
<nav> — ссылки</nav>
</header>
<main>
<article>
<header> — заголовок, дата</header>
Текст статьи
<section> — комментарии</section>
</article>
<aside> — похожие статьи</aside>
</main>
<footer>
Копирайт, контакты
</footer>
Вложенность семантических тегов
Семантические теги можно (и нужно) вкладывать друг в друга. Важно понимать, какие комбинации имеют смысл:
| Конструкция | Смысл | Оценка |
|---|---|---|
<article> > <section> |
В статье несколько разделов | ✓ |
<section> > <article> |
В разделе несколько статей | ✓ |
<header> > <nav> |
Навигация внутри шапки | ✓ |
<article> > <article> |
Например, комментарии к статье | ✓ |
<main> > <main> |
Невалидно — main может быть только один | ✗ |
<nav> > <nav> |
Навигация внутри навигации — бессмысленно | ✗ |
<footer> > <header> |
В подвале может быть заголовок | ✓ |
Почему <div> — это плохо?
Давайте сразу расставим точки над i: <div> — не зло. Это универсальный контейнер без семантического значения. И это нормально — использовать его там, где никакой другой тег не подходит.
Проблема возникает, когда <div> используют везде, игнорируя семантические теги. Это называется «div-verstka» или «div-болезнь».
Вот чем плоха бездумная верстка дивами:
- Потеря смысла. Браузер не знает, что внутри — шапка, статья или реклама.
- Плохой SEO. Поисковики хуже понимают структуру страницы.
- Проблемы с доступностью. Скринридеры не могут навигировать по странице.
- Грязный код. Обилие
<div>с кучей классов запутывает разработчиков.
Правило простое: если есть подходящий семантический тег — используйте его. Если нет — используйте <div>.
Например, для галереи изображений нет специального тега. Можно обернуть дивом. А для навигации есть <nav> — используем его.
Практика: вёрстка блога
А теперь — самое интересное. Давайте сверстаем небольшой блог, используя все семантические теги, которые мы изучили.
Задача: страница блога с шапкой, навигацией, списком статей, боковой панелью и подвалом. Каждая статья — самодостаточный <article>.
Попробуйте сначала написать сами, а потом сверьтесь с кодом ниже:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мой блог</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: system-ui, sans-serif;
line-height: 1.6;
color: #333;
background: #f8f8f8;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 20px;
}
header {
background: #2d2d2d;
color: white;
padding: 20px 0;
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
color: white;
text-decoration: none;
margin-left: 20px;
}
nav a:hover { text-decoration: underline; }
.content-wrapper {
display: grid;
grid-template-columns: 1fr 300px;
gap: 30px;
margin: 30px 0;
}
article {
background: white;
padding: 24px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
article h2 { margin-bottom: 8px; }
article time {
color: #666;
font-size: 0.9em;
}
article .read-more {
display: inline-block;
margin-top: 12px;
color: #e65100;
font-weight: 600;
text-decoration: none;
}
aside {
background: white;
padding: 24px;
border-radius: 8px;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
align-self: start;
}
aside section { margin-bottom: 24px; }
aside h3 { margin-bottom: 8px; font-size: 1.1em; }
aside ul { list-style: none; }
aside li { margin-bottom: 6px; }
aside a { color: #e65100; text-decoration: none; }
aside a:hover { text-decoration: underline; }
footer {
background: #2d2d2d;
color: white;
text-align: center;
padding: 20px 0;
margin-top: 40px;
}
@media (max-width: 768px) {
.content-wrapper {
grid-template-columns: 1fr;
}
header .container {
flex-direction: column;
gap: 12px;
}
nav a { margin: 0 10px; }
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>Мой блог</h1>
<nav>
<a href="/">Главная</a>
<a href="/blog">Блог</a>
<a href="/about">Обо мне</a>
<a href="/contacts">Контакты</a>
</nav>
</div>
</header>
<main>
<div class="container content-wrapper">
<div class="articles">
<article>
<header>
<h2>Как учить HTML и CSS</h2>
<time datetime="2026-06-20">20 июня 2026</time>
</header>
<p>Изучение веб-разработки начинается с основ. HTML — это структура, CSS — стиль. В этой статье я расскажу, с чего начать и на что обратить внимание новичку...</p>
<a href="#" class="read-more">Читать далее →</a>
</article>
<article>
<header>
<h2>CSS Grid: полное руководство</h2>
<time datetime="2026-06-15">15 июня 2026</time>
</header>
<p>CSS Grid — это мощная система компоновки, которая позволяет создавать сложные макеты с минимальным количеством кода. Давайте разберёмся с основными концепциями...</p>
<a href="#" class="read-more">Читать далее →</a>
</article>
<article>
<header>
<h2>Почему семантическая вёрстка важна</h2>
<time datetime="2026-06-10">10 июня 2026</time>
</header>
<p>Семантические теги появились в HTML5 и полностью изменили подход к вёрстке. Теперь мы не просто верстаем «на глаз», а придаём смысл каждому элементу...</p>
<a href="#" class="read-more">Читать далее →</a>
</article>
</div>
<aside>
<section>
<h3>Рубрики</h3>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Инструменты</a></li>
</ul>
</section>
<section>
<h3>Последние комментарии</h3>
<ul>
<li>Анна: «Отличная статья!»</li>
<li>Пётр: «Спасибо, очень помогло»</li>
<li>Мария: «Жду продолжения»</li>
</ul>
</section>
</aside>
</div>
</main>
<footer>
<div class="container">
<p>© 2026 Мой блог. Все права защищены.</p>
</div>
</footer>
</body>
</html>Разбор кода блога
Давайте разберём, какие семантические теги мы использовали:
| Тег | Где используется | Зачем |
|---|---|---|
<header> |
Шапка сайта + внутри каждой статьи | Содержит название сайта / заголовок статьи с датой |
<nav> |
Внутри шапки | Навигация по сайту |
<main> |
Основной контент | Всё уникальное содержимое страницы |
<article> |
Три блока статей | Каждая статья — самостоятельный материал |
<aside> |
Боковая панель | Дополнительная информация: рубрики, комментарии |
<section> |
Внутри aside | Каждый блок (рубрики, комментарии) — отдельный раздел |
<footer> |
Подвал сайта | Копирайт и заключительная информация |
<time> |
Внутри header статей | Машиночитаемая дата |
<time> с атрибутом datetime. Это тоже семантический тег — он указывает на дату в формате, понятном машинам. Браузеры и поисковики могут использовать эту информацию для умного отображения дат.
Семантические теги, которые мы не рассмотрели
В HTML5 есть и другие семантические теги. Вот краткий список для самостоятельного изучения:
| Тег | Описание |
|---|---|
<figure> |
Иллюстрация, диаграмма, фото. Внутри может быть <figcaption> — подпись. |
<figcaption> |
Подпись к <figure>. |
<mark> |
Выделенный текст (как маркером). |
<details> |
Раскрывающийся блок с дополнительной информацией. |
<summary> |
Заголовок для <details>. |
<address> |
Контактная информация (email, телефон, адрес). |
<blockquote> |
Длинная цитата с указанием источника (атрибут cite). |
<q> |
Короткая цитата в тексте. |
<abbr> |
Аббревиатура с атрибутом title для расшифровки. |
<figure>
<img src="diagram.png" alt="Схема семантической вёрстки">
<figcaption>Рис. 1 — Типовая структура семантической страницы</figcaption>
</figure>
<p>Используйте тег <mark>для выделения</mark> важных фрагментов.</p>
<details>
<summary>Нажмите, чтобы раскрыть</summary>
<p>А здесь — скрытый контент!</p>
</details>
<address>
Наш email: <a href="mailto:info@example.com">info@example.com</a>
</address>Проверочный чеклист
После того как вы сверстали страницу, пройдитесь по чеклисту. Если всё «да» — вы молодец:
- На странице ровно один
<main>? ☐ - Шапка обёрнута в
<header>? ☐ - Подвал — в
<footer>? ☐ - Навигация — в
<nav>? ☐ - Статьи — в
<article>? ☐ - Боковая панель — в
<aside>? ☐ - Разделы внутри статей — в
<section>? ☐ - Заголовки идут по порядку:
<h1>, затем<h2>,<h3>(не перескакиваем)? ☐ - У всех изображений есть
alt? ☐ - Страница понятна без CSS? ☐
Частые ошибки
Давайте посмотрим на ошибки, которые часто допускают новички (и не только):
Ошибка 1: <header> только для шапки сайта
Многие думают, что <header> может быть только один — для всей страницы. На самом деле <header> можно (и нужно) использовать внутри <article>, <section>, <aside>.
Ошибка 2: <nav> для всех ссылок
Не нужно оборачивать в <nav> каждую группу ссылок. Например, ссылки в подвале на политику конфиденциальности — это не навигация, а дополнительная информация. Используйте <nav> для основных блоков навигации.
Ошибка 3: <section> без заголовка
Технически <section> может быть без заголовка, но семантически это странно. Раздел без названия — что это за раздел? Всегда старайтесь добавлять заголовок.
Ошибка 4: Использование <br> для отступов
<br> — это перенос строки. Не используйте его для создания отступов между блоками. Для этого есть CSS margin и padding. <br> — для стихов, адресов, строк кода.
Ошибка 5: Игнорирование <h1>
На каждой странице должен быть ровно один <h1> — главный заголовок. Без него поисковики хуже понимают, о чём страница.
Заключение
Семантическая вёрстка — это не просто модный тренд. Это стандарт качества веб-разработки. Она делает ваш код:
- Понятным — для других разработчиков
- Доступным — для людей с ограничениями
- Оптимизированным — для поисковых систем
- Готовым к будущему — новые технологии будут опираться на семантику
Начинайте с малого: вместо <div class="header"> пишите <header>. Вместо <div class="nav"> — <nav>. Со временем это войдёт в привычку, и вы будете удивляться, как раньше жили без семантики.
А теперь — задание: возьмите любой свой старый проект, где всё свёрстано дивами, и перепишите его с использованием семантических тегов. Вы увидите, как код станет чище, понятнее и профессиональнее.
Урок 6.1: Семантическая вёрстка
5 вопросов