Разбираем, что такое , почему он важен для семантики и доступности веб-страниц, как использовать его максимально эффективно.
Тег <article> в HTML помогает выделить на веб-странице независимые, завершённые фрагменты контента, такие как новость, публикация в блоге или форумное сообщение. Правильное использование этого тега не только помогает браузерам и поисковым системам лучше понимать структуру страницы, но и делает контент более доступным для всех пользователей.
Что такое тег <article> и зачем он нужен
Тег <article> — это семантический элемент HTML5, обозначающий самостоятельный фрагмент контента, который можно использовать отдельно от основного сайта.
Используя тег <article>, мы сообщаем браузеру и другим системам — поисковым роботам или программам для чтения с экрана, что внутри находится логически отдельная часть страницы — похожая на статью, новость или публикацию.
Это важно для поисковых систем, потому что они лучше понимают структуру и могут показывать такие блоки отдельно в результатах выдачи — например, в Google News. Скринридеры — программы для озвучивания текста на экране — могут быстро находить и читать отдельные статьи, сайт становится доступнее для пользователей с нарушениями зрения. И в целом вёрстка становится понятнее и чище, особенно в больших проектах.
Примеры материалов, для которых идеально подходит тег <article>:
- пост в блоге;
- новостная статья;
- сообщение на форуме или комментарий пользователя;
- обзор продукта или услуги;
- интерактивный виджет, например погодный информер, если он самодостаточен.
Как пишется тег <article>: синтаксис и атрибуты
Синтаксис тега <article> прост. Это парный тег: у него есть открывающий тег <article> и закрывающий </article>. Весь контент, который относится к данной области, помещается между ними.
Базовый синтаксис:
<article> <h2>Заголовок статьи</h2> <p>Первый абзац статьи и другой контент…</p> <p>Продолжение статьи…</p> <footer> <p>Опубликовано: <time datetime=”2025-05-26″>26 мая 2025</time></p> </footer> </article>
Тег <article> поддерживает все глобальные атрибуты HTML:
- id — уникальный идентификатор элемента;
- class — один или несколько классов для применения CSS-стилей или взаимодействия через JavaScript;
- style — для добавления инлайновых CSS-стилей (хотя предпочтительнее использовать внешние таблицы стилей);
- title — текст всплывающей подсказки;
- атрибуты aria-* для улучшения доступности.
Пример с несколькими статьями на странице:
<body> <h1>Мой новостной сайт</h1> <article class=”news-item”> <h2>Важная новость дня</h2> <p>Сегодня произошло знаменательное событие…</p> <a href=”/news/important-event”>Подробнее</a> </article> <article class=”news-item”> <h2>Аналитический обзор</h2> <p>Эксперты проанализировали текущую ситуацию на рынке…</p> <a href=”/analytics/market-review”>Читать полностью</a> </article> <section id=”user-comments”> <h2>Комментарии читателей:</h2> <article class=”comment”> <h3>Комментарий от пользователя Читатель1</h3> <p>Очень интересная новость, спасибо!</p> <footer>Опубликовано: <time datetime=”2025-05-27T10:30:00″>27.05.2025</time></footer> </article> </section> </body>
В этом примере каждая новость и каждый комментарий читателя являются самостоятельными единицами контента и обёрнуты в тег <article>.
Как работает тег <article>: семантика и доступность
Использование тега <article> значительно улучшает семантику страницы, делая структуру контента понятной.
В чём разница между <article>, <section> и <div>
- <article> используют для тех блоков, которые можно воспринимать как самостоятельные: они логически завершены и понятны без окружающего контекста. Это может быть новость, пост в блоге, карточка товара или комментарий пользователя.
- <section> — для смысловых разделов внутри страницы: он помогает разбить контент на части, связанные одной темой, но не обязательно самостоятельные. Например, на странице «О компании» можно выделить отдельные секции: «История», «Команда», «Миссия».
- <div> — это просто контейнер без семантической нагрузки. Он нужен, когда других подходящих тегов нет: чтобы сгруппировать элементы, накинуть стили или построить сетку.
Хороший пример — новостной сайт. Каждая новость — это <article>, рубрики вроде «Экономика» или «Спорт» — это <section>, а сетка карточек или цветная подложка под ними — это <div>.
Когда нужно использовать <article>, а когда не стоит
Главный критерий — самодостаточность. Если блок можно вырезать из страницы и он при этом сохранит смысл, его можно оформить с помощью <article>. Такой контент обычно воспринимается как отдельная публикация: у него есть заголовок, текст, автор и дата, и он не требует дополнительного контекста, чтобы быть полезным.
Не стоит использовать <article>, если:
- вы просто группируете элементы без единого смысла — например, объединяете заголовок и кнопку;
- блок зависит от остального контента и не воспринимается отдельно;
- нужно подобрать тег для навигации, шапки, подвала или декоративных элементов — для них подойдут другие теги: <nav>, <header>, <footer>;
- цель — исключительно стилизация, без смысловой нагрузки; в этом случае используется <div>.
Иными словами: если блок — отдельная публикация, это <article>. Если он часть чего-то большего — скорее всего, нет.
Можно ли вкладывать <article> в <article>
Это возможно и даже полезно, когда требуется показать вложенность контента. Например, основной текст статьи и комментарии к нему могут быть оформлены таким образом:
<article> <h2>Основная статья</h2> <p>Содержимое основной статьи…</p> <article> <h3>Комментарий читателя</h3> <p>Текст комментария…</p> </article> </article>
Рекомендуется ограничивать вложенность до одного-двух уровней, чтобы не усложнять структуру страницы и восприятие контента.
Как правильно стилизовать <article> с помощью CSS
Стилизовать тег <article> можно так же, как и любой другой блочный элемент, например <div>. Он по умолчанию занимает всю ширину родителя и начинается с новой строки. Это значит, что вы можете задавать ему фон, отступы, границы, тени и любые другие визуальные параметры, — всё зависит от задач.
Пример стилизации карточки для <article>:
/* Контейнер всей карточки статьи */ <article class=”content-card”> /* Изображение, связанное со статьёй */ <img src=”feature-image.jpg” alt=”Изображение для статьи” width=”300″ height=”300″> /* Внутренний блок с текстовым содержанием карточки */ <div class=”card-body”> /* Заголовок статьи */ <h2>Интересный заголовок статьи</h2> /* Краткое описание — аннотация или вводный текст */ <p>Краткое описание, о чём пойдёт речь в статье…</p> /* Кнопка-ссылка для перехода к полной версии статьи */ <a href=”#” class=”read-more-btn”>Узнать больше</a> </div> </article>/* Основной контейнер статьи — визуально оформленная карточка */ .content-card { border: 1px solid #e0e0e0; /* Светлая рамка вокруг карточки */ border-radius: 6px; /* Скруглённые углы */ margin-bottom: 25px; /* Отступ снизу между карточками */ overflow: hidden; /* Обрезаем всё, что выходит за границы (например, тени или изображение) */ background-color: #ffffff; /* Белый фон */ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* Лёгкая тень для объёмного эффекта */ display: flex; /* Делаем карточку flex-контейнером */ flex-direction: column; /* Располагаем внутренние элементы вертикально */ width: 300px; /* Фиксированная ширина карточки */ } /* Изображение в верхней части карточки */ .content-card img { width: 100%; /* Растягиваем изображение на всю ширину карточки */ height: auto; /* Высота подбирается автоматически, чтобы сохранить пропорции */ display: block; /* Убираем снизу лишние отступы, которые бывают у изображений по умолчанию */ } /* Внутренний блок с текстом и кнопкой */ .content-card .card-body { padding: 20px; /* Внутренние отступы со всех сторон */ } /* Заголовок статьи */ .content-card h2 { margin-top: 0; /* Убираем верхний отступ (по умолчанию он есть у заголовков) */ font-size: 1.6em; /* Увеличиваем размер шрифта */ color: #2c3e50; /* Тёмно-синий цвет текста */ } /* Основной текст статьи */ .content-card p { font-size: 1em; /* Размер шрифта по умолчанию */ color: #34495e; /* Серо-синий цвет для удобства чтения */ line-height: 1.7; /* Интерлиньяж — расстояние между строками */ } /* Кнопка “Узнать больше” */ .content-card .read-more-btn { display: inline-block; /* Делаем ссылку блочным элементом, чтобы задать ширину и отступы */ margin-top: 15px; /* Отступ сверху от предыдущего элемента */ padding: 10px 18px; /* Внутренние отступы: сверху/снизу и по бокам */ background-color: #3498db; /* Синий фон кнопки */ color: #ffffff; /* Белый текст */ text-decoration: none; /* Убираем подчёркивание у ссылки */ border-radius: 4px; /* Скругляем углы кнопки */ transition: background-color 0.3s ease; /* Плавное изменение цвета при наведении */ } /* Поведение кнопки при наведении */ .content-card .read-more-btn:hover { background-color: #2980b9; /* Цвет кнопки становится чуть темнее при наведении */ }
Скриншот: Google Chrome / Skillbox Media
Частые ошибки при использовании тега <article>
Избыточное использование
Если оборачивать в <article> каждый блок, абзац или просто декоративный элемент, смысл теряется. Тег нужен для крупных, логически завершённых фрагментов: новости, статьи, комментария.
Применяйте <article> только там, где контент можно читать отдельно от всей страницы.
Путаница с <section>
Иногда вместо <article> используют <section> — и наоборот. Например, кто-то размечает как <article> раздел «Наши услуги», хотя это скорее тематическая группа, а не самостоятельная публикация.
Если блок — часть целого и зависит от окружения, это <section>. Если его можно вырезать и опубликовать отдельно — <article>.
Нет заголовка
Иногда внутри <article> забывают про заголовок. В результате страдает навигация — и визуальная, и голосовая (у скринридеров).
Добавляйте заголовок (<h2> или следующие) в каждый <article>.
Тег <article> — обёртка для всей страницы.
Иногда <article> используют как контейнер для всего сайта: в него помещают весь <body>, а то и <main>. Это сбивает с толку. Для главного содержимого есть тег <main>, а уже внутри него можно размещать отдельные <article>, если нужно.
Полезные советы и лайфхаки
- Проверяйте корректность использования тега <article> с помощью валидаторов HTML, чтобы избежать ошибок разметки.
- Комбинируйте <article> с другими семантическими тегами, такими как <aside> или <section>, чтобы улучшить семантику всей страницы.