skip to main content

<article>

html

Кратко 🔗

Тег <article> обозначает законченный и самодостаточный раздел документа, описывающий какую-то сущность: статью, товар, карточку пользователя и т.д.

Пример 🔗

<article>
<h1>Тег <code>&lt;article&gt;</code> и с чем его едят</h1>
<h2>Кратко</h2>
<p>
Тег <code>&lt;article&gt;</code> обозначает законченный и самодостаточный
раздел документа, описывающий какую-то сущность: статью, товар, карточку
пользователя и т. д.
</p>
<h2>Пример</h2>
<pre>
<code>Рекурсия! 💥</code>
</pre>
</article>

Как пишется 🔗

<article>
<!-- Содержимое -->
</article>

Как это понять 🔗

Тег <article> семантично «помечает» содержимому принадлежность к какой-то одной конкретной сущности. Никакого поведенческого или иного оформления это не даёт, визуально выглядит как блочный <div>-элемент.

Подсказки 🔗

<article> или <section>? 🔗

В отличие от <article>, который отмечает самодостаточный элемент документа, <section> является частью какого-то раздела. Но какого-то абсолютного правила тут нет — всё на усмотрение автора.

Например, если мы верстаем книгу с главой «Бран», повествующей «о 7-летнем юноше, сыне лорда Винтерфелла», то это скорее всего <section>, т.к. в книге скорее всего есть и другие, не менее интересные разделы (не обязательно только об этом персонаже).

С другой стороны можно представить твит, статью на Хабре или страницу на КиноПоиске, на которой просто написано, что «сериал снят по мотивам серии романов Джорджа Р. Р. Мартина» — тогда каждая из этих публикаций будет уже <article>, потому что каждая из них полноценна и самодостаточна по своему содержанию.

Автор: Роман,