HTML :: Тег <article>
В HTML тег <article> (от англ. article – статья) выделяет независимый фрагмент веб-страницы, который можно отнести к статье, новости, сообщению на форуме или записи комментария. При этом содержимое элемента должно быть связано с общим содержимым страницы, но также иметь и свой собственный смысл. Кроме того, в элементе <article> может присутствовать собственный заголовок одного из уровней h1-h6, а также собственные локальные элементы <header>, <footer>, <section>, <nav> или <aside>.
Разрешается использовать одни элементы <article> внутри других. Однако запрещается располагать внутри <article> элемент <main>. Кроме того, элемент <article> не должен быть потомком элемента <address>.
Синтаксис
<article>
...
</article>
Закрывающий тег: обязателен.
Атрибуты
Для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.
Ссылки
Официальный сайт W3C: https://html.spec.whatwg.org/multipage/sections.html#the-article-element
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/article
Примеры
<!-- ----------- Уникальный контент страницы -------------- --> <main> <!-- Делаем разметку для статьи о яблоках --> <article> <!-- Собственная шапка --> <header> <!-- Задаем собственный заголовок 2-го уровня --> <h2>Красные или зеленые яблоки?</h2> <!-- Внутренняя навигация по статье --> <nav> <ul> <li><a href="#red_apples">О красных сортах яблок</a></li> <li><a href="#green_apples">О зеленых сортах яблок</a></li> </ul> </nav> </header> <!-- ----------- 1-й раздел статьи ---------- --> <section id="red_apples"> <!-- Задаем собственный заголовок 3-го уровня --> <h3>О красных сортах яблок</h3> <p> Не для кого не секрет, что красные сорта яблок... </p> </section> <!-- ---------- 2-й раздел статьи ----------- --> <section id="green_apples"> <!-- Задаем собственный заголовок 3-го уровня --> <h3>О зеленых сортах яблок</h3> <p> Зеленые сорта яблок... </p> </section> <!-- ---------- «Подвал» всей статьи ----------------------- --> <footer class="site_footer"> <p> Дата публикации: <time datetime="2015-05-15 19:00">15 мая</time> </p> <!-- Информация об авторе --> <address> Автор: Петр Романовский<br> Тел. +375-444-44-44 (до 23-00) </address> </footer> </article> <!-- ... и другие статьи, например, о пирогах с яблоками --> </main>
Пример №1
<!-- Рецензия на новый фильм --> <article class="filmReview"> <!-- Заголовок статьи --> <header> <h2>Парк Дохлого периода</h2> </header> <!-- Общая рецензия от сайта --> <section class="main_review"> <p>За 3 доллара и такой шедевр!</p> </section> <!-- Отзывы пользователей --> <section class="user_reviews"> <!-- Отзыв первого пользователя --> <article class="user_review"> <p>По-моему они реально дохлые!</p> <!-- Подвал первого отзыва --> <footer> <p> Опубликовано <time datetime="2019-05-16 22:00">16 мая</time> Ванюшей. </p> </footer> </article> <!-- Отзыв первого пользователя --> <article class="user_review"> <p>Слишком заметно, что резиновые.</p> <!-- Подвал второго отзыва --> <footer> <p> Опубликовано <time datetime="2019-05-17 19:30">17 мая</time> Катериной. </p> </footer> </article> </section> <!-- Конец секции с отзывами пользователей --> <!-- Подвал всей статьи --> <footer> <p> Опубликовано <time datetime="2015-05-15 19:00">15 мая</time> Стаффом. </p> </footer> </article> <!-- Конец всей статьи -->
Пример №2