Sectioning Elements
Overview
Within your <main> content, you need to break information down into logical, digestible chunks. HTML5 provides <article> and <section> for this exact purpose. An <article> is designed to be completely self-contained and independently distributable (like a blog post, a news story, or a forum comment). A <section> is a broader thematic grouping of content (like a 'Features' section or a 'Contact Us' section).
Syntax
<main>
<!-- A Section grouping related features together -->
<section aria-labelledby="features-heading">
<h2 id="features-heading">Why Choose Us</h2>
<p>We are the best in the business.</p>
</section>
<!-- An Article representing a self-contained piece of content -->
<section aria-labelledby="news-heading">
<h2 id="news-heading">Latest News</h2>
<article>
<header>
<h3>New API Released</h3>
<time datetime="2026-05-12">May 12, 2026</time>
</header>
<p>We just launched v4 of our API...</p>
</article>
</section>
</main>Common Pitfalls
- Using
<section>strictly as a CSS wrapper to apply a background color or padding. If the block of content doesn't logically require a heading (like an<h2>), it should be a generic<div>, not a<section>. - Forgetting to include a heading inside
<section>or<article>. Screen readers use headings to generate the outline; an anonymous section without a heading breaks the map.
Interview Questions
<article> and a <section>?If the content makes complete sense if you stripped it out of the webpage and posted it on a completely different website (like a tweet or a blog post), use <article>. If it only makes sense within the context of the current page, use <section>.
Real-World Example
A standard E-commerce product listing.
<!-- The entire grid is a section of products -->
<section>
<h2>Trending Electronics</h2>
<div class="grid">
<!-- Each individual product card is a self-contained article -->
<article class="product-card">
<img src="laptop.jpg" alt="Pro Laptop">
<h3>Pro Laptop 2026</h3>
<p>$1,999</p>
<button>Add to Cart</button>
</article>
<!-- ... more articles ... -->
</div>
</section>Check Your Knowledge
Test your understanding of Sectioning Elements with these quick questions.