Семантическая вёрстка текста в HTML5: article, section, figure и blockquote

Содержание

1. 1. Введение: семантическая революция HTML5 и закат «дивосупа»
2. 2. Архитектурные контейнеры текста: article против section
   • Тег article: автономный синдицируемый контент
   • Тег section: тематический раздел с заголовком
   • Вложенность: article внутри section и section внутри article
   • Боковой контент: тег aside для сносок и врезок
3. 3. Оформление цитат: связка blockquote, q и cite
   • Развернутые блочные цитаты blockquote и атрибут cite
   • Строчные цитаты q и кавычки браузера
   • Тег cite: название произведения, а не имя автора
4. 4. Иллюстрации и сниппеты с подписями: figure и figcaption
   • Семантика автономного блока figure
   • Использование figure для кода, таблиц и графиков
5. 5. Вспомогательная семантика: time, address, code и pre
   • Тег time с машиночитаемым атрибутом datetime
   • Тег address: контактные данные автора
   • Связка pre и code для листингов
6. 6. Алгоритм выбора: блок-схема div -> section -> article -> aside
7. 7. Комплексный пример: эталонный лонгрид на HTML5
8. 8. Часто задаваемые вопросы (FAQ)
9. Об авторе и редакции
10. Структурированные данные (JSON-LD)

---

1. Введение: семантическая революция HTML5 и закат «дивосупа»

Семантическая вёрстка HTML5 is the architectural practice (архитектурная практика построения интерфейсов с использованием тегов, отражающих смысловую роль каждого блока документа).

Тег article в HTML5 is an independent syndicatable block (самодостаточный блок контента, имеющий автономное значение вне контекста остальной страницы).

Тег section в HTML5 refers to a thematic grouping (тематическая группа контента в документе, объединённая общей темой и заголовком).

Тег figure в HTML5 means an encapsulated illustration unit (изолированный блок иллюстративного или справочного контента с официальной подписью).

До появления спецификации HTML5 в 2014 году веб-страницы верстались с помощью бесконечных вложенных тегов <div> с классами вроде <div class="post">, <div class="content-part">, <div class="sidebar">. Поисковые краулеры и парсеры были вынуждены угадывать назначение каждого блока по классам и атрибутам. Это явление в веб-разработке получило название «дивосуп» (div soup).

Стандарт HTML5 в корне изменил ситуацию. Как подчеркивает руководство MDN Web Docs по семантическим элементам HTML5, новые контейнеры позволяют браузерам автоматически строить точное дерево доступности (Accessibility Object Model), а поисковым роботам Google и Яндекса — без ошибок отделять полезную статью от навигации, рекламы и колонтитулов.

Руководство по вёрстке. Общий каркас тегов и принципы форматирования текста представлены в нашем центральном хабе:
👉 Вёрстка текста в HTML: полное руководство по тегам, стилизации и семантике.

---

2. Архитектурные контейнеры текста: article против section

Спецификация WHATWG Sections Specification ввела принципиальное различие между самодостаточным контентом и тематическими подразделами.

Тег article: автономный синдицируемый контент

Элемент <article> представляет собой законченный, независимый фрагмент информации, который можно вырезать со страницы и опубликовать в RSS-ленте, на стороннем сайте-агрегаторе или в мобильном приложении без потери смысла:

• Полноценная статья или публикация в блоге;
• Карточка товара в каталоге интернет-магазина;
• Отдельный комментарий пользователя под статьей;
• Новостной релиз или интерактивный виджет.

<!-- Самодостаточная статья блога, готовая к синдикации -->
<article>
  <header>
    <h1>Оптимизация производительности веб-приложений</h1>
    <p>Автор: Алексей Кузнецов</p>
  </header>
  <p>Быстрая загрузка страниц напрямую снижает отток пользователей...</p>
</article>

Тег section: тематический раздел с заголовком

Элемент <section> — это логическая часть документа или статьи, объединённая общей подтемой. Согласно спецификации консорциума W3C, каждая секция почти всегда должна содержать собственный заголовок (<h2>–<h6>), формулирующий тему этого раздела.

<!-- Тематический раздел внутри статьи с обязательным заголовком h2 -->
<section>
  <h2>1. Анализ узких мест в рендеринге</h2>
  <p>Первый шаг оптимизации — аудит ключевых метрик Core Web Vitals...</p>
</section>

Правило чистого кода: Никогда не используйте тег <section> как простую обёртку для стилизации (например, чтобы задать серый фон на всю ширину экрана). Если контейнеру не требуется заголовок и он нужен только для CSS-стилей, используйте нейтральный тег <div>.

О правильной иерархии заголовков h1–h6 внутри секций читайте в нашем гайде:
👉 Структурные теги в HTML: иерархия заголовков h1–h6, абзацы p, br и hr.

Вложенность: article внутри section и section внутри article

Стандарт HTML5 допускает оба варианта вложенности, и каждый решает свою задачу:

1. section внутри article: Самый классический сценарий для лонгридов. Статья (<article>) делится на тематические главы (<section>).
2. article внутри section: Сценарий ленты или каталога. Секция «Свежие комментарии» (<section>) содержит список отдельных независимых комментариев (<article>).

<!-- Пример: секция комментариев, содержащая независимые article -->
<section class="comments-section">
  <h2>Отзывы читателей (2)</h2>
  
  <article class="comment">
    <h3>Иван Смирнов</h3>
    <p>Отличная статья, внедрил рекомендации на своем проекте!</p>
  </article>

  <article class="comment">
    <h3>Елена Морозова</h3>
    <p>Спасибо за наглядный разбор разницы между article и section.</p>
  </article>
</section>

Боковой контент: тег aside для сносок и врезок

Тег <aside> обозначает контент, который косвенно связан с окружающим материалом, но может быть исключен без потери основной нити повествования:

• Авторские врезки «Совет эксперта» или «К сведению»;
• Боковые панели сайта (сайдбары) с ссылками на похожие материалы;
• Блоки глоссария или определения редких терминов;
• Рекламные баннеры.

<!-- Боковая врезка со сноской автора внутри статьи -->
<aside class="editor-note">
  <p>
    <strong>Обратите внимание:</strong> Для тестирования доступности
    используйте бесплатные программы экранного доступа NVDA и VoiceOver.
  </p>
</aside>

---

3. Оформление цитат: связка blockquote, q и cite

Для передачи чужой речи и ссылок на авторитетные источники в HTML5 существует выверенная система тегов, соответствующая стандартам доступности W3C WAI Web Content Accessibility Guidelines.

Развернутые блочные цитаты blockquote и атрибут cite

Тег <blockquote> представляет собой блочный контейнер для объемных многострочных цитат. Атрибут cite может содержать скрытый URL-адрес первоисточника (полезно для поисковых краулеров, хотя пользователи его не видят):

<!-- Развернутая блочная цитата с указанием URL-источника в атрибуте cite -->
<blockquote cite="https://developers.google.com/search/docs">
  <p>
    Качественный контент — это материал, созданный в первую очередь для людей,
    а не для манипулирования позициями в поисковых системах.
  </p>
  <footer>
    — <cite>Руководство Google для веб-мастеров</cite>
  </footer>
</blockquote>

Строчные цитаты q и кавычки браузера

Тег <q> (inline quotation) предназначен для коротких цитат внутри обычного текста абзаца. Браузер автоматически подставляет правильные кавычки вокруг содержимого тега <q>.

При этом браузер ориентируется на атрибут lang документа:

• В документе <html lang="ru"> браузер подставит русские кавычки-ёлочки (« »);
• В документе <html lang="en"> браузер подставит английские двойные кавычки (“ ”).

<!-- Строчная цитата с автоматической генерацией кавычек браузером -->
<p>
  В своем докладе технический директор подчеркнул, что
  <q>семантика — это фундамент отказоустойчивой архитектуры</q>,
  и призвал команду отказаться от устаревших подходов.
</p>

Тег cite: название произведения, а не имя автора

Самая распространённая ошибка верстальщиков — оборачивание в тег <cite> имени автора цитаты (<cite>Иван Иванов</cite>).

Согласно спецификации WHATWG The cite Element, в стандарте HTML5 тег <cite> должен содержать исключительно название произведения (название книги, статьи, фильма, нормативного акта или веб-страницы). Имя человека внутри него указывать недопустимо.

Правильно (HTML5)	Неправильно
— <cite>Война и мир</cite>, Л. Н. Толстой	— <cite>Л. Н. Толстой</cite>
— <cite>Спецификация HTML5</cite>, консорциум W3C	— <cite>Тим Бернерс-Ли</cite>
— <cite>Статистика интернет-трафика</cite>, Statista	— <cite>Джон Доу</cite>

---

4. Иллюстрации и сниппеты с подписями: figure и figcaption

Элемент <figure> изолирует автономный контент, снабженный подписью <figcaption>.

Семантика автономного блока figure

Контейнер <figure> означает, что помещенный внутрь элемент является частью статьи, но его можно переместить в конец документа или в приложение к статье без нарушения хода мысли. Подпись <figcaption> может быть только первым или последним прямым дочерним элементом внутри <figure>.

<!-- Иллюстрация с официальной подписью figcaption -->
<figure>
  <img src="/images/accessibility-tree.webp" alt="Схема построения дерева доступности" width="800" height="400" style="max-width: 100%; height: auto; border-radius: 8px;">
  <figcaption>Рис. 2. Трансформация HTML-разметки в Accessibility Object Model.</figcaption>
</figure>

Использование figure для кода, таблиц и графиков

Многие верстальщики ошибочно считают, что <figure> создан только для изображений <img>. В действительности <figure> идеально подходит для:

1. Листингов программного кода;
2. Аналитических таблиц с данными;
3. Векторных SVG-диаграмм и графиков;
4. Цитат с подробной атрибуцией.

<!-- Использование figure для сниппета программного кода с подписью -->
<figure>
  <pre><code class="language-html">&lt;section&gt;
  &lt;h2&gt;Заголовок секции&lt;/h2&gt;
&lt;/section&gt;</code></pre>
  <figcaption>Листинг 1. Минимальный шаблон семантической секции HTML5.</figcaption>
</figure>

---

Форматирование текста онлайн
Автоматическая и ручная разметка текста тегами заголовков, списков и абзацев. Поддерживает Markdown-синтаксис и экспорт в 1 клик. Автоматические абзацы, очистка лишних стилей и подготовка контента к публикации.

👉 Конвертер текста в HTML онлайн

---

5. Вспомогательная семантика: time, address, code и pre

Тег time с машиночитаемым атрибутом datetime

Тег <time> незаменим для новостных порталов и блогов. Он переводит человекочитаемую дату в точный стандарт ISO 8601 для поисковых ботов Google и Яндекса:

<!-- Дата публикации для отображения в результатах поиска -->
<p>
  Опубликовано: <time datetime="2026-10-14T08:00:00+04:00">14 октября 2026 года</time>
</p>

Поисковые роботы используют дату из тега <time> для формирования сниппета с датой в поисковой выдаче и проверки свежести контента.

Тег address: контактные данные автора

Тег <address> предназначен для указания контактной информации автора или владельца документа (адрес электронной почты, телефон, ссылка на форму обратной связи).

Важно: Не используйте <address> для случайных почтовых адресов в тексте (например, адреса гостиницы в путеводителе). Для них используется обычный параграф <p> с разрывами <br>.

<!-- Контактная информация автора статьи в футере публикации -->
<footer>
  <address>
    По вопросам сотрудничества: <a href="mailto:author@example.com">author@example.com</a><br>
    Канал автора: <a href="https://t.me/example" target="_blank" rel="noopener noreferrer">@webdev_channel</a>
  </address>
</footer>

Связка pre и code для листингов

• Тег <code> — строчный элемент для обозначения программного синтаксиса, имен функций, CSS-классов.
• Тег <pre> — сохраняет исходные пробелы и табуляции. В связке <pre><code> они обеспечивают точное отображение многострочного кода.

---

6. Алгоритм выбора: блок-схема div -> section -> article -> aside

Чтобы безошибочно выбирать контейнер при проектировании макета, следуйте логике алгоритма:

1. Имеет ли блок смысл вне контекста сайта (можно ли его опубликовать отдельно в RSS или соцсети)?
   • Да ➔ Используйте <article>.
   • Нет ➔ Переходите к следующему шагу.
2. Является ли контент косвенным дополнением (врезка, реклама, ссылки на смежные темы)?
   • Да ➔ Используйте <aside>.
   • Нет ➔ Переходите к следующему шагу.
3. Объединен ли контент общей темой и требуется ли ему собственный заголовок?
   • Да ➔ Используйте <section>.
   • Нет ➔ Переходите к следующему шагу.
4. Блок нужен исключительно для позиционирования, CSS-сетки (Flex/Grid) или фонового цвета?
   • ➔ Используйте нейтральный тег <div>.

Как стилизовать полученные семантические блоки, настроить отступы и типографику, читайте в нашем гиде:
👉 Стилизация текста в CSS: выравнивание text-align, шрифты и списки.

---

7. Комплексный пример: эталонный лонгрид на HTML5

Ниже представлен цельный пример реального лонгрида, в котором все семантические элементы HTML5 объединены в логичную экосистему:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Архитектура HTML5: эталонный шаблон</title>
</head>
<body>

  <!-- Автономный материал статьи -->
  <article>
    <header>
      <h1>Принципы построения чистой разметки в 2026 году</h1>
      <p>Опубликовано: <time datetime="2026-10-14">14 октября 2026</time></p>
    </header>

    <!-- Первый тематический раздел -->
    <section>
      <h2>Разделение ответственности в коде</h2>
      <p>
        Основа долговечной архитектуры — четкое разделение данных и их оформления.
      </p>
      
      <!-- Авторитетная цитата с подписью источника -->
      <blockquote cite="https://www.w3.org/">
        <p>Веб создан для всех людей, независимо от используемого оборудования и ПО.</p>
        <footer>— <cite>W3C Standards Overview</cite></footer>
      </blockquote>
    </section>

    <!-- Второй тематический раздел с графиком -->
    <section>
      <h2>Скорость сканирования страниц</h2>
      <p>Грамотная семантика снижает нагрузку на процессор мобильного устройства.</p>
      
      <!-- Изолированная диаграмма с подписью -->
      <figure>
        <img src="/images/chart-speed.svg" alt="График скорости парсинга DOM-дерева" width="600" height="300">
        <figcaption>График 1. Зависимость скорости парсинга от глубины DOM-дерева.</figcaption>
      </figure>
    </section>

    <!-- Боковая врезка для читателя -->
    <aside>
      <h3>Совет разработчику</h3>
      <p>Всегда валидируйте разметку через W3C Markup Validator.</p>
    </aside>

    <!-- Контакты автора статьи -->
    <footer>
      <address>
        Автор: Александр Смирнов (<a href="mailto:alex@example.com">alex@example.com</a>)
      </address>
    </footer>
  </article>

</body>
</html>

---

8. Часто задаваемые вопросы (FAQ)

Обязателен ли заголовок внутри каждого тега section?

Да, согласно спецификации W3C HTML5, каждый тег <section> должен иметь логический заголовок (<h2>–<h6>), раскрывающий его тему. Если блоку не требуется заголовок и он служит только для визуальной группировки элементов или настройки CSS-стилей, по стандарту необходимо использовать тег <div>.

Влияет ли семантическая вёрстка HTML5 на поисковые позиции сайта?

Да, влияние семантики на SEO проявляется по трем направлениям: во-первых, роботы Google и Яндекса точнее извлекают текстовые сущности для быстрых ответов (Featured Snippets); во-вторых, теги <article> и <time> ускоряют попадание в Google Новости и ленту рекомендаций; в-третьих, семантичные сайты набирают более высокий балл доступности (Accessibility) в Google Lighthouse.

В чём разница между тегами article и section?

Тег <article> самодостаточен — его можно вынести за пределы сайта (в RSS-ленту или публикацию соцсети), и он сохранит полный смысл. Тег <section> является составной частью более крупного документа и вне его контекста теряет смысл.

Можно ли внутри тега figure размещать программный код?

Да, спецификация HTML5 прямо рекомендует использовать контейнер <figure> со связкой <pre><code> и подписью <figcaption> для оформления программных сниппетов, технических листингов, формул и аналитических таблиц.

---