HTML тег <article>
Тег HTML <article> обозначает независимый самодостаточный контент, например запись в блоге. Синтаксис, роль доступности и отличие от <section>.
Тег <article> — один из секционных элементов HTML5. Он определяет фрагмент независимого, самодостаточного контента — того, что сохранит смысл, даже если извлечь его со страницы и опубликовать где-то ещё. Хороший тест: если контент можно синдицировать в RSS-ленту, отобразить в виде отдельной карточки или перепубликовать на другом сайте без потери смысла — он принадлежит <article>.
Типичные варианты использования элемента <article>:
- запись в блоге или новостная статья
- сообщение на форуме
- карточка товара в каталоге
- комментарий пользователя или отзыв
- интерактивный виджет или гаджет
Зачем использовать элемент <article>?
Элемент <article> несёт смысловую нагрузку, которой лишён универсальный <div>:
- Доступность. Если у
<article>есть доступное имя (например, заголовок, на который ссылаетсяaria-labelledby), вспомогательные технологии отображают его как ориентирarticle. Пользователи программ чтения с экрана могут переходить между статьями, не читая страницу сверху вниз. - SEO и семантика. Поисковые системы и инструменты для чтения (например, «режим чтения» в браузерах) используют
<article>как сигнал основного, самодостаточного тела контента, что помогает им извлекать главный текст публикации. - Удобство сопровождения. Разметка описывает назначение контента, поэтому CSS и JavaScript могут обращаться к настоящим семантическим единицам, а не к вспомогательным хукам для стилизации.
<article> vs <section> vs <div>
Эти три элемента легко перепутать. Используйте следующее практическое правило:
<article>— самодостаточный контент, который можно независимо распространять или синдицировать (запись в блоге, комментарий, карточка товара). Спросите себя: «Может ли это существовать отдельно?» Если да — используйте<article>.<section>— тематическая группировка связанного контента внутри документа, как правило с заголовком (например, «Комментарии» или «Похожие товары»). Это часть структуры документа, но не предназначена для самостоятельного существования.<div>— универсальный контейнер без семантического значения. Используйте его только тогда, когда не подходит ни один другой элемент — как правило, исключительно для стилизации или вёрстки.
<article> и <section> могут быть вложены друг в друга в любом порядке: <section> может группировать несколько элементов <article>, а <article> может содержать элементы <section>, делящие его содержимое. Когда элементы <article> вложены, внутренний представляет контент, связанный с внешним, — например, комментарий внутри записи блога.
Структура элемента <article>
С помощью нескольких связанных элементов можно придать <article> полноценную структуру:
- Элементы заголовков (
<h1>—<h6>) для обозначения и структурирования содержимого. Каждый<article>может начинаться с собственного заголовка. <header>для вводного контента (заголовок и метаданные) и<footer>для заключительного контента.- Элемент
<address>для указания информации об авторе. Он применяется к каждому<article>независимо, включая вложенные. - Элемент
<time>с атрибутомdatetimeдля обозначения даты публикации.
В одном HTML-документе можно использовать несколько тегов <article>.
Синтаксис
Тег <article> используется парно. Содержимое записывается между открывающим (<article>) и закрывающим (</article>) тегами.
Пример HTML тега <article>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<article>
<h1>Title of the article</h1>
<p>Text of the article</p>
</article>
</body>
</html>Результат
Пример HTML тега <article> внутри тега <section>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<section>
<h1>Articles about flowers</h1>
<article>
<h2>Roses</h2>
<p>Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.</p>
</article>
<article>
<h2>Lilies</h2>
<p> Lily - an amazing beauty flower, one of the most ancient among a variety of bulbous plants. </p>
</article>
</section>
</body>
</html>Пример карточки записи блога с <header>, <footer>, <time> и <address>:
В этом примере показана реалистичная самодостаточная запись блога: <header> содержит заголовок и дату публикации, <address> указывает автора, а <footer> завершает публикацию.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<article>
<header>
<h2>How to Grow Roses</h2>
<p>
Published on
<time datetime="2026-06-17">June 17, 2026</time>
</p>
</header>
<p>Rose – the queen of flowers – is the object of worship and ardent love. With a little care, anyone can grow healthy, fragrant roses at home.</p>
<footer>
<p>Written by
<address>
<a href="mailto:[email protected]">Jane Doe</a>
</address>
</p>
</footer>
</article>
</body>
</html>Атрибуты
У тега <article> нет собственных специальных атрибутов. Он поддерживает глобальные атрибуты и атрибуты событий.
Стилизация элемента <article>
По умолчанию <article> — блочный элемент без визуального оформления, поэтому выглядит так же, как обычный <div>. Внешний вид задаётся с помощью CSS. Правило ниже добавляет каждой статье рамку, отступы и промежутки, визуально разделяя карточки:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
article {
border: 1px solid #ccc;
border-radius: 8px;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<article>
<h2>Roses</h2>
<p>Rose – the queen of flowers – is the object of worship and ardent love.</p>
</article>
<article>
<h2>Lilies</h2>
<p>Lily – an amazing beauty flower, one of the most ancient bulbous plants.</p>
</article>
</body>
</html>Доступность и ARIA
Элемент <article> имеет неявную ARIA-роль article, поэтому, как правило, не нужно добавлять role="article" вручную. Чтобы сделать его навигируемым ориентиром, который программы чтения с экрана могут перечислять и к которому могут переходить, дайте ему доступное имя — чаще всего это делается указанием aria-labelledby на заголовок внутри элемента:
<article aria-labelledby="post-title">
<h2 id="post-title">How to Grow Roses</h2>
<p>Roses reward patient gardeners with fragrant, long-lasting blooms.</p>
</article>Связанные секционные элементы, которые удобно использовать вместе с <article>: <section> — для тематических групп, <aside> — для контента, косвенно связанного с основным (например, боковая панель), а также <header> / <footer> — для вводного и заключительного контента. Полную картину см. в обзоре секционных элементов HTML5.