structure
<article>
Self-contained content that could be distributed independently — a blog post, news story, forum reply, or product card. Use it when the content would make sense syndicated or on its own page.
<article><h2>Post title</h2>...</article>Common attributes
| Attribute | Purpose |
|---|---|
| aria-labelledby | Links article to its heading |
| id | Anchor target |
| class | Styling hook |
Examples
<article><h2>How to bake sourdough</h2><p>...</p></article>A single blog post
<article><h3>Great product</h3><p>5 stars — ...</p></article>A user-submitted review card
<article><header><h2>Title</h2></header><p>Body</p><footer>By Ada</footer></article>Article with its own header and footer
Gotcha
Related tags
<section>
A thematic grouping of content that typically has a heading and belongs in a document outline. Use it when the content is a distinct chunk of a larger whole; use <article> instead if it stands alone.
<main>
Contains the dominant content of the document's <body> — the content unique to this page, excluding site-wide headers, nav, sidebars, and footers. Use exactly one visible <main> per page.
<div>
Generic block-level container with no inherent semantic meaning, used to group content for styling or scripting. Reach for it only when no semantic element (section, article, nav, header) fits the content.
<span>
Generic inline container with no semantic meaning, used to style or script a run of text or inline content. Use it when semantic inline elements like <em>, <strong>, or <code> don't fit.
<header>
Represents introductory content or a group of navigational aids for its nearest sectioning ancestor. Use it at the top of the page, or inside an <article> or <section> for that block's heading area.