<article>

25 января 2023

Тег <article>в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть использован и переиспользован в разных местах без потери своего значения.

Примерами такого контента могут быть статьи, блог-посты, научные работы, сообщения на форумах и другие материалы, которые имеют смысл и ценность, даже если они прочитаны вне контекста, в котором были созданы.

Синтаксис тега <article>

<article>
  <!-- контент -->
</article>

Спецификация HTML

Тег <article> является актуальным согласно спецификации HTML.

Семантический или нет

Тег <article> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого. Он используется для выделения важного и/или интересного контента на странице.

Примеры использования

Создание статьи на сайте новостей:

<article>
  <h2>Заголовок статьи</h2>
  <p>Текст статьи...</p>
</article>

Группирование статей на странице:

<section>
  <h2>Секция с несколькими статьями</h2>
  <article>
    <h3>Заголовок статьи 1</h3>
    <p>Текст статьи 1...</p>
  </article>
  <article>
    <h3>Заголовок статьи 2</h3>
    <p>Текст статьи 2...</p>
  </article>
  <article>
    <h3>Заголовок статьи 3</h3>
    <p>Текст статьи 3...</p>
  </article>
</section>

Использование в основном содержимом сайта:

<main>
  <h1>Заголовок страницы</h1>
  <article>
    <h2>Главная новость</h2>
    <p>Текст новости...</p>
  </article>
  <section>
    <h2>Раздел с другими новостями</h2>
    <article>
      <h3>Заголовок новости 1</h3>
      <p>Текст новости 1...</p>
    </article>
    <article>
      <h3>Заголовок новости 2</h3>
      <p>Текст новости 2...</p>
    </article>
  </section>
</main>

Использование для обзора продукта:

<article>
  <h2>Обзор продукта</h2>
  <p>Текст обзора...</p>
  <section>
    <h3>Преимущества продукта</h3>
    <ul>
      <li>Атрибут 1 — значение 1</li>
      <li>Атрибут 2 — значение 2</li>
    </ul>
  </section>
</article>

Для чего использовать тег <article>

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

Атрибуты тега <article>

Тег <article> не имеет собственных контентных атрибутов, но поддерживает все глобальные атрибуты HTML.

Ограничения

Не следует использовать тег <article> для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.

Поддержка браузерами

Тег <article>поддерживается всеми современными браузерами.

Альтернативные теги

Тег <article> не имеет прямых альтернативных тегов, но его можно заменить на тег <div> c добавлением дополнительных классов в случае, если на странице нет статей или других самостоятельных материалов.