Тег <article> обозначает законченный фрагмент, который сохраняет смысл сам по себе - вне страницы, на которой находится. Пост в блоге, карточка товара, отзыв, комментарий, виджет прогноза погоды. Тег парный, закрывающий </article> обязателен.
В этой статье
Для чего нужен тег article в HTML
Оформления тег не даёт - выглядит он ровно как <div>. Ценность в другом: он сообщает, что внутри не часть страницы, а самостоятельная единица содержимого, которую можно вынуть и показать отдельно.
Такие единицы окружают нас постоянно. Пост, который попадает в RSS-ленту и в подборку "похожие статьи". Карточка товара, которая показывается и в каталоге, и в результатах поиска, и в блоке рекомендаций. Отзыв, который выводится и под товаром, и на странице отзывов. Везде это один и тот же кусок содержимого в разном окружении - и везде он остаётся понятным.
<article>
<h2>Как выбрать первый ноутбук</h2>
<p><time datetime="2026-03-14">14 марта 2026</time></p>
<p>Текст статьи...</p>
</article>Пример: как выглядит отдельный article
Как выбрать первый ноутбук
Обратите внимание на заголовок: он здесь не для красоты. Спецификация рекомендует давать каждому <article> собственный заголовок <h1>-<h6> - иначе вынутый из страницы блок непонятно чем подписывать. Валидатор за его отсутствие не ругается, но смысл блока без подписи теряется.
Как проверить, что перед вами article
Критерий ровно один: представьте, что блок вынули со страницы и показали отдельно - в ленте, в письме, в результатах поиска. Если он остался осмысленным, это <article>. Если без окружения он превращается в обрывок, значит это часть страницы, а не самостоятельная единица.
Правило простое на словах и неочевидное на практике. Разберите четыре реальных блока.
Какой тег подходит блоку?
Разобрано: 0 из 4
Пост в блоге со своим заголовком и датой
Верно
Не угадали
Это article. Пост целиком уходит в RSS-ленту и в блок "похожие статьи" - и там он понятен без страницы, на которой был опубликован.
Раздел "Наши услуги" на странице компании
Верно
Не угадали
Это section. Раздел существует только как часть страницы о компании: вынутый отдельно, он не рассказывает, чьи это услуги.
Комментарий под постом
Верно
Не угадали
Это article, причём вложенный в article самого поста. У комментария есть автор, дата и законченная мысль - он выводится и в ленте "последние комментарии" сайта.
Блок "Частые вопросы" на странице товара
Верно
Не угадали
Это section. Вопросы относятся к конкретному товару и вне его страницы теряют предмет разговора - это тематическая часть страницы, а не отдельная единица.
Заметьте, что размер блока ни при чём. Комментарий в две строки - <article>, а раздел на пол-экрана - <section>. Решает только самостоятельность.
Чем article отличается от section
Эти два тега выбирают чаще всего вместе, и путаница между ними - самая частая в семантической вёрстке. Разводит их одно: <article> самодостаточен, <section> - часть целого.
Когда сомневаетесь, идите по трём вопросам подряд:
- Блок имеет смысл в отрыве от страницы? Значит
<article>. - Нет, но это осмысленная тематическая часть с собственным заголовком? Значит
<section>. - Ни то, ни другое, блок нужен только для вёрстки и отступов? Значит
<div>.
Вкладываться друг в друга они могут в любом сочетании, и все три варианта валидны.
<!-- section внутри article: главы длинной статьи -->
<article>
<h2>Большое руководство</h2>
<section><h3>Часть первая</h3></section>
<section><h3>Часть вторая</h3></section>
</article>
<!-- article внутри section: лента постов -->
<section>
<h2>Последние записи</h2>
<article><h3>Первый пост</h3></article>
<article><h3>Второй пост</h3></article>
</section>
<!-- article внутри article: пост и комментарии к нему -->
<article>
<h2>Пост</h2>
<article><h3>Комментарий</h3></article>
</article>Есть ещё одно заблуждение вокруг <section>, которое стоит знать заранее. Иногда пишут, что браузер сам понижает уровень заголовка внутри вложенных секций, и потому можно везде ставить <h1>. Визуально браузер действительно уменьшает такой заголовок, но в дереве документа он остаётся <h1>, и скринридер услышит именно первый уровень. Уровни заголовков нужно проставлять руками по реальной структуре.
Что размещают внутри article
Внутрь помещается всё, что нужно блоку для самостоятельности - и почти никаких ограничений на теги нет. Заголовок обязателен, остальное по содержанию.
Внутри <article> допустимы собственные header и <footer> - шапка статьи с заголовком и датой, подвал с тегами и автором. Разбор того, чем такой <header> отличается от шапки сайта, находится на его странице: роль banner получает только тот, что прописан прямо в <body>.
<article>
<header>
<h2>Как выбрать первый ноутбук</h2>
<p><time datetime="2026-03-14">14 марта 2026</time></p>
</header>
<p>Текст статьи...</p>
<footer>
<address>Автор: Анна Петрова</address>
</footer>
</article>Два тега в этом примере стоят не случайно. <time> с атрибутом datetime даёт дату в машиночитаемом виде - её разбирает и поисковик, и агрегатор ленты. <address> отвечает за контакты автора, но только автора самой статьи: во вложенном <article> с комментарием он уже не к месту, потому что относился бы к внешней статье.
Ограничение у тега всего одно, и встречается оно редко: сам <article> не должен находиться внутри <address>.
Какой уровень заголовка ставить внутри article
Уровень зависит не от тега, а от того, чем этот <article> является для страницы. Заголовок <h1> принадлежит странице целиком, и он на ней один.
На странице со списком записей - главной, ленте блога, каталоге - <h1> занимает название самой страницы, а карточки получают уровень ниже:
<main>
<h1>Блог о вёрстке</h1>
<article>
<h2>Как выбрать первый ноутбук</h2>
</article>
<article>
<h2>Что такое семантическая вёрстка</h2>
</article>
</main>Если карточки дополнительно собраны в <section> с собственным заголовком, уровни сдвигаются ещё на шаг: <h1> у страницы, <h2> у секции "Последние записи", <h3> у каждой карточки.
На странице одной записи картина обратная. Там пост и есть содержимое страницы, поэтому его заголовок внутри <article> и будет <h1>:
<main>
<article>
<h1>Как выбрать первый ноутбук</h1>
<p>Текст статьи...</p>
</article>
</main>Запрета на <h1> внутри <article> нет - валидатор пропустит его хоть в каждой карточке списка. Но тогда на странице окажется десяток первых уровней, и ни поисковик, ни скринридер не определят, который из них относится к самой странице. Именно здесь и подводит миф о понижении заголовков, разобранный выше: уровни приходится расставлять руками по реальной вложенности.
Вложенные article: комментарии и карточки в ленте
Вложенность разрешена, и у неё есть чёткое условие: внутренний <article> должен относиться к внешнему. Классический случай - комментарии под постом: каждый комментарий самостоятелен, но привязан к записи, под которой находится.
<article>
<h2>Как выбрать первый ноутбук</h2>
<p>Текст статьи...</p>
<section>
<h3>Комментарии</h3>
<article>
<h4>Анна</h4>
<p>Спасибо, помогло с выбором.</p>
</article>
<article>
<h4>Сергей</h4>
<p>А что с временем работы от батареи?</p>
</article>
</section>
</article>Пример: пост с вложенными комментариями
Как выбрать первый ноутбук
Пунктирной рамкой здесь показаны вложенные <article>. На настоящем сайте никакой рамки не появится - тег не добавляет оформления, разница существует только в разметке.
Тот же приём работает не только с комментариями. Прогноз погоды на неделю - внешний <article> на весь прогноз и по одному вложенному на каждый день; лента товаров - карточки внутри общего блока подборки.
Частые ошибки
Ошибки с этим тегом почти всегда одного происхождения: его выбирают по размеру блока или по внешнему виду, а не по самостоятельности содержимого.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
В <article> обёрнут любой крупный блок страницы |
Тег перестаёт что-либо означать, а поисковик получает неверную картину структуры | Проверить блок на самостоятельность и при необходимости заменить на <section> или <div> |
Внутри <article> нет заголовка |
Вынутый из страницы блок нечем подписать, в структуре документа он безымянный | Добавить заголовок нужного уровня первым элементом |
| Уровни заголовков расставлены наугад в расчёте на то, что браузер их понизит | Визуально всё выглядит правильно, но скринридер получает плоскую или неверную иерархию | Проставить <h2>-<h4> вручную по реальной вложенности |
<address> с автором статьи прописан во вложенном комментарии |
Контакты формально относятся к внешней статье, а не к автору комментария | Во вложенном <article> обойтись обычным текстом или <p> |
Комментарии
Спасибо, помогло с выбором.
А что с временем работы от батареи?