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.
Top comments (1)
Good!