Briefly
The <article>
tag denotes a completed and self-contained section of a document that describes some entity: a product, a user card, an advertisement banner, a widget.
Example
<article> <h1>The <code><article></code> tag and what to do with it</h1> <h2>Briefly</h2> <p> The <code><article></code> tag indicates a completed and self-contained section of the document describing some entity: an article, a product, a user card, etc. </p> <h2>Example</h2> <pre> <code>Recursion! 💥</code> </pre></article>
<article> <h1>The <code><article></code> tag and what to do with it</h1> <h2>Briefly</h2> <p> The <code><article></code> tag indicates a completed and self-contained section of the document describing some entity: an article, a product, a user card, etc. </p> <h2>Example</h2> <pre> <code>Recursion! 💥</code> </pre> </article>
How to Write
<article> <!-- Content --></article>
<article> <!-- Content --> </article>
How to Understand
The <article>
tag semantically "marks" that its content is a specific entity. It does not provide any behavioral or other styling; it visually appears as a block <div>
-element.
Tips
<article>
or <section>
?
Unlike the <article>
tag, which marks a self-contained element of the document, <section>
is part of some section. But there is no single and absolute rule here — everything is up to the author's discretion.
For example, if we are laying out a book with a chapter "Bran," narrating "about a 7-year-old boy, the son of Lord Winterfell," then this is most likely a <section>
, since there are probably other parts (chapters) in the book, not necessarily only about this character.
On the other hand, one can imagine a tweet, a weather widget, or an advertisement banner — each of these blocks would already be an <article>
, because each is complete and self-sufficient in its content.