Article and Section
Group related content with article and section.
Syntax
<article> ... </article>
<section> ... </section>Two elements help organize the body of a page.
<article>— self-contained content that could stand alone, like a blog post or news story.<section>— a thematic grouping of content, usually with a heading.
Use <article> when the content makes sense on its own, and <section> to group related parts.
Example
Loading editor…
Press Run to see the result.
When to use it
- A news site wraps each story in <article> so syndication tools and RSS readers can extract standalone content.
- A tutorial page uses <section> to divide the lesson into Introduction, Syntax, and Examples regions.
- A product page uses multiple <section> elements for Features, Pricing, and Testimonials to organize distinct topic blocks.
More examples
Article as standalone content unit
<article> contains a self-contained piece of content that makes sense when taken out of context.
<article>
<header>
<h2>5 Tips for Writing Clean HTML</h2>
<time datetime="2025-06-01">June 1, 2025</time>
</header>
<p>Clean HTML improves accessibility and maintainability...</p>
<footer>
<p>Tags: <a href="/tag/html">HTML</a></p>
</footer>
</article>Sections dividing a tutorial page
<section> divides a page into named, headlined regions useful for TOC anchor navigation and document outline.
<main>
<section id="intro">
<h2>Introduction</h2>
<p>This lesson covers HTML sections...</p>
</section>
<section id="syntax">
<h2>Syntax</h2>
<pre><code><section>...</section></code></pre>
</section>
<section id="examples">
<h2>Examples</h2>
</section>
</main>Nested articles inside a section
Multiple <article> elements inside a <section> represent a feed of related but independent content items.
<section>
<h2>Latest Posts</h2>
<article>
<h3>HTML Basics</h3>
<p>An intro to markup...</p>
</article>
<article>
<h3>CSS Grid Guide</h3>
<p>Master two-dimensional layouts...</p>
</article>
</section>
Discussion