HTML `<article>` element

The <article> element represents a self-contained composition in a document, page, application, or site. It is content that can sensibly stand on its own.

A news story, blog post, forum post, product review, lesson page, reference entry, comment, or independent card can be an article if it has its own identity and could be distributed, reused, syndicated, or understood apart from the surrounding page.

This is the main difference between <article> and <section>. A section groups content under a topic. An article is more like a complete little work. A card can present such a work, but its border, background, or position in a grid does not make it an article.

An <article> often has its own heading. It may also have a header, footer, author information, publication date, figures, lists, sections, and other ordinary content.

Articles can be nested when the inner articles relate to the outer one. For example, a blog post can contain comments marked as articles: each comment is a separate contribution responding to that post. An unrelated story would belong outside the post's article.

The short reference entry below has a subject and an explanation that can be understood together. It could appear on its own page or alongside other reference entries without losing its meaning.

Attributes: GLOBALS.

Typical layout:
<article>
  <header>
    <h2>The progress element</h2>
    <p>Part of the PageRIJ HTML reference.</p>
  </header>

  <p>The progress element shows how far a task has advanced.
    For a task with a known total, value gives the amount
    completed and max gives the total.</p>
</article>

Visual representation:

The progress element

Part of the PageRIJ HTML reference.

The progress element shows how far a task has advanced. For a task with a known total, value gives the amount completed and max gives the total.

HTML <article> element

HTML `<article>` element