HTML5: Choosing Between `<article>` and `<section>` for Page Structure

Deciding Between `` and ``

Use `

` when the content is self-contained and can be distributed independently, such as a blog post, news story, or user comment. Use `` when you need a thematic grouping of content within a single page, such as a chapter or a related-features block. The decision affects the document outline exposed to assistive technologies and search engines.

Supported Options and Constraints

Element	Meaning	Self-contained?	Typical use case
<article>	Independent, syndicable content	Yes	Blog entry, product review, comment
<section>	Thematic grouping within a document	No	Document chapter, tab panel group

Trade-offs

• <article> communicates independence to screen readers and search indexers, but it should not wrap every content block just to create a visual box.
• <section> groups related content without implying it can stand alone, but it should include a heading to describe the group.
• Neither element replaces CSS for layout or JavaScript for behavior.

Implementation Example

A product page can use `

` to group customer reviews, with each review marked as ``:

<section>
  <h2>Customer Reviews</h2>
  <article>
    <header>
      <h3>Great value</h3>
      <p>By Alex on 2026-01-10</p>
    </header>
    <p>This product met my expectations.</p>
  </article>
</section>

Verification

1. Open the HTML file in a modern browser.
2. Open Developer Tools and select the Elements tab.
3. Inspect a review block and confirm the accessibility tree exposes it as an `` role, not a generic ``.
4. Run an accessibility checker to confirm heading and landmark structure.

Limitation: Semantic tags do not define visual style. Use CSS for presentation, and maintain a logical heading hierarchy (`

` through ``) inside each ``.