Photo album with pictures, on the left — a large one with a boy, on the top right — a sword, on the bottom right — a girl

<article>

Tag for creating standalone units of content: from cards to comments. Not for articles!

Time to read: less than 5 min

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>&lt;article&gt;</code> tag and what to do with it</h1>  <h2>Briefly</h2>  <p>    The <code>&lt;article&gt;</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>&lt;article&gt;</code> tag and what to do with it</h1>
  <h2>Briefly</h2>
  <p>
    The <code>&lt;article&gt;</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.