HTML · семантика

Тег article: самостоятельный материал

article содержит самостоятельный материал, который можно прочитать или распространить отдельно от окружающей страницы. Типичные примеры — статья, новость, комментарий и карточка записи.

Структура статьи

У материала должен быть собственный заголовок. Дату удобно записывать через time, а тематические части — через section с подзаголовками.

<article>
  <header>
    <h1>Как работает Flexbox</h1>
    <time datetime="2026-10-15">15 октября 2026</time>
  </header>
  <p>Разбираем главную ось и выравнивание.</p>
</article>

Карточки публикаций

В ленте каждый материал может быть отдельным article. Заголовок обычно содержит ссылку на полную страницу, а описание кратко объясняет пользу перехода.

<article class="post-card">
  <h2><a href="/css/flexbox/">Основы Flexbox</a></h2>
  <p>Собираем строку карточек без лишних костылей.</p>
</article>

Вложенные разделы

Внутри article допустимы несколько section. Обратная конструкция тоже возможна: раздел «Последние статьи» содержит набор article. Выбор зависит не от вложенности, а от смысла каждого блока.

Частые ошибки

• Article без собственного заголовка.
• Использовать article как универсальную карточку.
• Помещать несколько независимых публикаций в один article.
• Дублировать h1 страницы в каждой карточке списка.

Связанные темы

Тег section · Семантика · Заголовки