Content Sections in HTML
From the HTML cheat sheet · Semantic HTML5 Elements · verified Jul 2026
Content Sections
Organize content with semantic section elements
css
<!-- Article - independent content -->
<article>
<h2>Blog Post Title</h2>
<p>This is a complete, independent piece of content...</p>
</article>
<!-- Section - thematic grouping -->
<section>
<h2>Chapter 1</h2>
<p>Section content...</p>
</section>
<!-- Figure with caption -->
<figure>
<img src="chart.png" alt="Sales chart">
<figcaption>Q4 2024 Sales Results</figcaption>
</figure>
<!-- Details/Summary (collapsible) -->
<details>
<summary>Click to expand</summary>
<p>Hidden content here...</p>
</details>html
<article>
<h2>Article</h2>
<section>
<h3>Section 1</h3>
<figure>
<img src="img.jpg" alt="Description">
<figcaption>Image caption</figcaption>
</figure>
</section>
<section>
<h3>Section 2</h3>
<details>
<summary>More info</summary>
<p>Expandable content</p>
</details>
</section>
</article>💡 article = standalone content (blog post, news)
📌 section = thematic grouping of content
🟢 Essential - Use figure for images with captions
⚡ details/summary creates native accordion
⚠️ Don't use section just for styling
semanticcontentsections