Тег <article>: самостоятельный материал
Как обозначить публикацию или карточку, которая сохраняет смысл отдельно от страницы.
Зачем нужен этот элемент
article представляет самостоятельную единицу содержимого: заметку, обзор или отдельную публикацию. Полезный вопрос при выборе тега: останется ли блок понятным, если показать его вне текущего списка? Если да, article часто подходит.
Внутри материала допустимы собственная шапка, заголовок, разделы и подвал с метаданными. В каталоге может быть несколько article. Уровни заголовков всё равно выбирайте с учётом структуры страницы, а не автоматически делайте каждый заголовок h1.
Синтаксис и пример
<article>
<header><h2>Как работает CSS Grid</h2></header>
<p>Разбираем строки и колонки на простом макете.</p>
<footer>Рубрика: CSS</footer>
</article>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| Заголовок | Кратко называет самостоятельный материал. |
| header / footer | Могут относиться к конкретной статье. |
| Список карточек | Каждая самостоятельная карточка может быть article. |
Частая ошибка
Небольшая практика
Создайте две карточки статей с заголовками h2 и ссылками. Убедитесь, что по одному заголовку понятно содержание каждой.
Разберите также <section>, <header>: эти элементы пригодятся в том же интерфейсе.