`<article>` элемент статьи HTML

Базовая поддержка Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в различных версиях браузеров. Она поддерживается браузерами с июля 2015 года.

Элемент <article> HTML представляет собой самостоятельную композицию в документе, на странице, в приложении или на сайте, которую предполагается распространять или повторно использовать независимо от окружающего содержимого (например, в синдикации). К таким композициям относятся, например, публикация на форуме, статья в журнале или газете, запись в блоге, карточка товара, комментарий пользователя, интерактивный виджет или гаджет, а также любой другой самостоятельный элемент содержимого.

Попробуйте

<article class="forecast">
  <h1>Weather forecast for Seattle</h1>
  <article class="day-forecast">
    <h2>03 March 2018</h2>
    <p>Rain.</p>
  </article>
  <article class="day-forecast">
    <h2>04 March 2018</h2>
    <p>Periods of rain.</p>
  </article>
  <article class="day-forecast">
    <h2>05 March 2018</h2>
    <p>Heavy rain.</p>
  </article>
</article>

.forecast {
  margin: 0;
  padding: 0.3rem;
  background-color: #eeeeee;
}

.forecast > h1,
.day-forecast {
  margin: 0.5rem;
  padding: 0.3rem;
  font-size: 1.2rem;
}

.day-forecast {
  background: right/contain content-box border-box no-repeat
    url("/shared-assets/images/examples/rain.svg") white;
}

.day-forecast > h2,
.day-forecast > p {
  margin: 0.2rem;
  font-size: 1rem;
}

В документе может быть несколько статей; например, в блоге, где текст каждой статьи отображается последовательно по мере прокрутки страницы, каждая запись будет находиться в элементе <article>, возможно, с одним или несколькими элементами <section> внутри.

Атрибуты

Этот элемент включает только глобальные атрибуты.

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

Каждый <article> следует обозначить, обычно добавив заголовок (элемент <h1> — <h6>) в качестве дочернего элемента <article>.
Если элемент <article> вложен в другой такой элемент, внутренний элемент представляет статью, связанную с внешним. Например, комментарии к записи в блоге могут быть элементами <article>, вложенными в <article>, представляющий запись в блоге.
Сведения об авторе элемента <article> можно указать с помощью элемента <address>, но они не распространяются на вложенные элементы <article>.
Дату и время публикации элемента <article> можно указать с помощью атрибута datetime элемента <time>.

Примеры

<article class="film_review">
  <h2>Jurassic Park</h2>
  <section class="main_review">
    <h3>Review</h3>
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <h3>User reviews</h3>
    <article class="user_review">
      <h4>Too scary!</h4>
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
          by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <h4>Love the dinos!</h4>
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-17 19:00">May 17</time>
          by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on
      <time datetime="2015-05-15 19:00">May 15</time>
      by Staff.
    </p>
  </footer>
</article>

Результат

Техническая сводка

Категории содержимого	потоковое содержимое, секционное содержимое, осязаемое содержимое
Допустимое содержимое	Потоковое содержимое.
Пропуск тегов	Нет, обязательны как открывающий, так и закрывающий тег.
Допустимые родители	Любой элемент, допускающий потоковое содержимое. Обратите внимание, что элемент `<article>` не должен быть потомком элемента `<address>`.
Неявная роль ARIA	`article`
Допустимые роли ARIA	`application`, `document`, `feed`, `main`, `none`, `presentation`, `region`
Интерфейс DOM	`HTMLElement`

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

Спецификация
HTML> # the-article-element>

Совместимость с браузерами

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari для iOS	Samsung Internet	WebView Android	WebView для iOS
`article`	5	12	4	11.1	5	18	4	11.1	4.2	1.0	4.4	4.2

См. также

Другие элементы, связанные с разделами: <body>, <nav>, <section>, <aside>, h1, h2, h3, h4, h5, h6, <hgroup>, <header>, <footer>, <address>
Использование разделов и структуры HTML

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/article

<article> элемент статьи HTML