<article>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

Интерактивный пример

<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: #eee;
}

.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> не должен быть потомком элемента <address>.
Допустимые ARIA-роли application, document, feed, main, presentation, region
DOM-интерфейс HTMLElement

Атрибуты

К этому элементу применимы только глобальные атрибуты.

Примечание

  • Каждый элемент <article> должен быть идентифицирован, обычно путём добавления заголовка (элементы <h1>-<h6>) в качестве дочернего элемента.
  • Когда элемент <article> является вложенным, внутренний элемент представляет собой контент связанный с внешним элементом. Например, комментарии к публикации в блоге могут быть элементами <article>, вложенными в другой <article>, являющийся публикацией в блоге.
  • Информация об авторе в элементе <article> может быть представлена через элемент <address>, но это не применимо к вложенным элементам <article>.
  • Дата и время публикации в элементе <article> могут быть описаны с помощью атрибута datetime элемента <time>. Обратите внимание, что атрибут pubdate элемента <time> больше не является частью стандарта W3C HTML5.

Примеры

html
<article class="film_review">
  <header>
    <h2>Парк Юрского периода</h2>
  </header>
  <section class="main_review">
    <p>Динозавры были величественны!</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>Слишком страшно для меня.</p>
      <footer>
        <p>
          Опубликовано
          <time datetime="2015-05-16 19:00">16 мая</time>
          Лизой.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>Я согласен, динозавры мои любимцы.</p>
      <footer>
        <p>
          Опубликовано
          <time datetime="2015-05-17 19:00">17 мая</time>
          Томом.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Опубликовано
      <time datetime="2015-05-15 19:00">15 мая</time>
      Стаффом.
    </p>
  </footer>
</article>

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

Specification
HTML
# the-article-element

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

BCD tables only load in the browser

Смотрите также