23 июн 2025
0

Тег <article> для чего он нужен и как используется

Разбираем, что такое <article>, почему он важен для семантики и доступности веб-страниц, как использовать его максимально эффективно.

Иллюстрация: Оля Ежак для Skillbox Media

Редакция «Код» Skillbox Media

Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

Тег <article> в HTML помогает выделить на веб-странице независимые, завершённые фрагменты контента, такие как новость, публикация в блоге или форумное сообщение. Правильное использование этого тега не только помогает браузерам и поисковым системам лучше понимать структуру страницы, но и делает контент более доступным для всех пользователей.

Содержание

Что такое тег <article> и зачем он нужен
Как пишется тег <article>: синтаксис и атрибуты
Как работает тег <article>: семантика и доступность
В чём разница между <article>, <section> и <div>
Когда нужно использовать <article>, а когда не стоит
Можно ли вкладывать <article> в <article>
Как правильно стилизовать <article> с помощью CSS
Частые ошибки при использовании тега <article>
Полезные советы и лайфхаки

Что такое тег <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> помогают им идентифицировать основные, независимые блоки контента. Каждый элемент <article> можно рассматривать как отдельную, логически завершённую часть общего содержания, как отдельную главу в книге.

Польза для SEO. Тег <article> не влияет напрямую на позиции сайта в поиске, но помогает поисковым системам лучше понять структуру страницы. Контент внутри него воспринимается как завершённый и значимый блок — такой фрагмент проще вынести в сниппет, отобразить в ленте или в рекомендациях. Это упрощает индексацию и повышает шансы страницы появиться в результатах поиска.

Улучшение доступности (accessibility). Тег <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>:

HTML

/* Контейнер всей карточки статьи */
<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>

CSS

/* Основной контейнер статьи — визуально оформленная карточка */
.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>, чтобы улучшить семантику всей страницы.