Once you have your header and navigation in place, you need somewhere to put the actual content. HTML5 gives you three great tags for organizing content: <main>, <section>, and <article>. They look similar, but they have distinct purposes.
The Main Tag
<main> wraps the dominant content of the page. There should be only one <main> per page, and it should not include things like site headers, nav bars, or footers that repeat across pages. It is the star of the show.
<main>
<h2>Latest Articles</h2>
<p>Here is what I have been writing about lately.</p>
</main>
The Section Tag
<section> groups related content together thematically. Think of it like a chapter in a book. Each section should have its own heading. A product page might have a section for reviews, a section for specs, and a section for related items.
<section>
<h2>Product Reviews</h2>
<p>Our customers love this widget...</p>
</section>
<section>
<h2>Technical Specifications</h2>
<p>Dimensions: 10 x 5 x 3 inches</p>
</section>
The Article Tag
<article> represents a self-contained piece of content that could stand on its own — a blog post, a news story, a forum comment, a product card. If you could syndicate it in an RSS feed, it belongs in an <article>.
<article>
<h3>How I Learned HTML in a Week</h3>
<p>It was easier than I expected...</p>
<footer>Posted on June 20, 2026</footer>
</article>
Putting It All Together
These tags nest beautifully. A <main> can contain multiple <section> elements, and each section can contain multiple <article> elements. The key is that <section> groups things thematically, while <article> holds things that are independent.