<article>

<article> represents a self-contained composition that could be reused or distributed independently: a post, review, news story, or comment. It does not mean splitting one product description arbitrarily across pages.

An article in a document

This document contains a page title and a separate article with its own heading and author information.

<main>
  <h1>Garden notes</h1>
  <article>
    <h2>Starting herbs indoors</h2>
    <p>Put seedlings near a bright window and keep their soil lightly moist.</p>
    <footer><p>By Alex Example</p></footer>
  </article>
</main>

article {
  border-top: 1px solid #94a3b8;
  padding-top: 1rem;
}

Structure and headings

An article accepts flow content and normally has a heading. Choose its rank from the actual page hierarchy. Nesting <article> or <section> does not automatically turn an <h1> into a lower-rank heading for assistive technology.

Nested articles should relate to the outer one, such as comments on a post. A <header> and <footer> inside an article introduce and conclude that article; they do not become the document’s global banner and footer landmarks.

Choose a container

Use section for a thematic part of a larger composition. Use div when you only need a styling wrapper. Article markup describes meaning; it supplies neither a card design nor a guaranteed search-ranking benefit.

Sources and browser support

MDN: article describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.