When to Use , , , , , and in HTML5

HTML5 introduced semantic elements that help structure web content more meaningfully — not only for developers but also for browsers and assistive technologies like screen readers.

If you're unsure when to use <main>, <section>, <article>, <header>, <footer>, or <aside>, this post is for you. Let's break down what they are, when to use them, and what not to do.

🧱 <main>

Defines the main content of the page — the part that makes it unique.

✅ Use it for:

• Blog posts, product listings, dashboards


• Anything that's central to your page

❌ Don't use it for:

• Headers, footers, nav menus, sidebars

⚠️ There should be only one <main> element per page.

📦 <section>

Groups content that shares a common theme, ideally with a heading (<h1>–<h6>).

✅ Use it for:

• A "Latest Posts" section


• A FAQ section


• A page broken into logical parts

🗣️ Tip: Use aria-label or include a heading for better accessibility.

📰 <article>

A self-contained, reusable block of content — it should make sense on its own.

✅ Use it for:

• A blog post or news article


• A user comment or review

❌ Don't use it to wrap unrelated things just because they’re grouped visually.

🎯 <header>

Introduces a section or the entire page. Can include:

• Title


• Logo


• Navigation

✅ Use it:

• Once at the top of the page


• Inside <section> or <article> as an intro

🔚 <footer>

Wraps up a section or page. Can include:

• Author info


• Related links


• Copyright

✅ Use it:

• At the bottom of the page


• Inside <article> to show metadata like date or tags

📎 <aside>

Represents content that is related but not essential to the main content.

✅ Use it for:

• Sidebars


• Related posts


• Pull quotes, tips, or ads

🧠 Conclusion

Semantic HTML makes your code more accessible, maintainable, and understandable — not just for you, but for everyone who interacts with your site.

Thanks for taking the time to read, any feedback will be welcome :)

See you around.