Элемент <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>
Перейти к заданиям
Автор: Влад Мержевич
Последнее изменение: 01.06.2020