Тег <article>

Автономная запись
  • Категории: Потоковое содержимое, Секционное содержимое
  • Контекст:

    Где ожидается потоковое содержимое.

  • Модель:

    Потоковое содержимое, кроме элемента <main>.

Тег <article> дословно переводится как "статья", но такое определение может только запутать начинающих разработчиков. Поэтому я предлагаю называть этот элемент как "запись".

Записью мы можем считать любой самодостаточный блок контента, который может быть легко удален или перемещен из текущего контекста в любое другое место. Чаще всего этот тег используется для обозначения различных публикуемых записей, которые имеют свой заголовок, потенциального автора и дату публикации:

  • статья
  • новость
  • пост
  • комментарий
  • твит
  • отзыв
  • и т.д.

Однако он может быть использован и для обозначения интерактивных виджетов. Чтобы понять, подходит ли блок для данного тега, необходимо оценить его независимость и самодостаточность. Имеет ли данный блок смысл вне текущего контекста, и можно ли его читать без остальной части сайта.

Атрибуты

  • Глобальные атрибуты

  • Публикуемая запись

    Самым очевидным кандидатом для использования <article> являятся любая публикуемаяе запись. Например, это может быть запись блога, новость или статья, а также карточки с их анонсами:

  • Вступительная часть

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

  • Заключительная часть

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

  • Адресная информация

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

  • Собственная навигация

    Записи <article> удобно сопровождать собственной навигацией в виде якорей по ее содержимому. Более того, если такая навигация является уникальной и важной для текущего документа, то мы можем обернуть ее тегом <nav>.

  • Комментарии и отзывы

    Тег <article> можно использовать не только для больших записей, таких как статьи или новости. Небольшие комментарии и отзывы также являются хорошими кандидатами.

    Обратите внимание, что у наших комментариев нет заголовка или другой вступительной части, поэтому мы не используем тег <header>. Вместо этого у нас есть информация об авторе и дата публикации, для которых больше подходит тег <footer>. Такое использование тегов является полностью корректным, ведь элемент <footer> не обязательно должен находиться в конце записи.

  • Вложенные записи

    Каждая запись может иметь вложенные элементы <article>, которые будут считаться связанными с основной записью. Например, внутри поста блога может быть сводка других постов или группа комментариев.

  • Независимые заголовки

    Поскольку элементы <article> являются полностьсю автономными и независимыми от контекста, каждый из них может иметь собственную иерархию заголовков, включая главный заголовок <h1>. Однако, большинство разработчиков предпочитают не использовать эту возможность, оставляя единственный заголовок <h1> на весь документ.

  • Запись как основное содержимое

    Если автономная запись является единственной на странице и представляет собой ее основное содержимое, то обозначение ее через <article> может быть избыточным. Вместо этого лучше использовать только тег <main>.

Поделитесь данной записью с друзьями