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 , , , , , or , this post is for you. Let's break down what they are, when to use them, and what not to do.
🧱
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
element per page.
📦
Groups content that shares a common theme, ideally with a heading (–).
✅ 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.
📰
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.
🎯
Introduces a section or the entire page. Can include:
- Title
- Logo
- Navigation
✅ Use it:
- Once at the top of the page
- Inside
oras an intro
🔚
Wraps up a section or page. Can include:
- Author info
- Related links
- Copyright
✅ Use it:
- At the bottom of the page
- Inside
to show metadata like date or tags
📎
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.
