Элемент article

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

Под независимостью подразумевается, что если убрать всё остальное на веб-странице, то содержимое <article> не потеряет свой смысл. Надо понимать, что речь не идёт о полной независимости — статьи могут ссылаться друг на друга, на форуме люди отвечают на ранее заданные вопросы, в комментариях делается цитирование. Подразумевается, что <article> хранит самодостаточное содержимое, наподобие статьи в бумажном журнале. Даже если вырезать такую статью из журнала, мы всё равно узнаем её название, автора и прочитаем текст самой статьи.

Каждый элемент <article> обязательно должен содержать заголовок через <h2>-<h6>. Минимальная структура элементов продемонстрирована в примере 1.

Пример 1. Структура <article>

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

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

Пример 2. Элементы внутри <article>

<article>
 <header>
  <h2>Роль цитокинов при дорсалгии</h2>
  <p>Автор: Гордон Фримен, канд. физ.-мат. наук</p>
 </header>
 <aside>Тезисы статьи</aside>
 <p>Содержание статьи</p>
 <footer>
  <p><address>freemen@blackmesa.com</address></p>
  <p>Опубликовано <time datetime="2018-11-27">27 ноября 2018</time></p>
 </footer>
</article>

Поскольку <article> представляет собой независимую часть, то всё внутри этого элемента должно относиться к его содержимому. К примеру, если <article> содержит статью, то <header> и <footer> задают шапку и подвал статьи, <h2> — её заголовок, элемент <time> определяет дату публикации этой статьи, <address> содержит контактную информацию автора статьи.

Внутри <article> запрещено использовать элемент <main>.

Также внутрь <article> допускается вставлять дополнительные <article>, если это имеет смысл. Так, первый <article>используется для статьи, а второй — для комментариев к ней (пример 3).

Пример 3. Вложенные <article>

<article>
 <h2>Роль цитокинов при дорсалгии</h2>
 <p>Текст статьи</p>
 <h2>Комментарии</h2>
 <article>
  <h3>Барни Калхаун</h3>
  <p>Помнишь, я должен тебе пиво!</p>
 </article>
 <article>
  <h3>Айзек Кляйнер</h3>
  <p>Ну, Гордон, вижу, костюм на тебе сидит как будто на тебя сшит.</p>
 </article>
</article>