HTML Semantic Elements
HTML Semantic Elements
They make your code readable, accessible, SEO-friendly, and future-proof.
1. What Are Semantic Elements?
Semantic elements tell what the content is, not just how it looks.
Non-semantic
Semantic
Same layout, better meaning.
2. Why Use Semantic HTML?
- Better SEO (search engines understand structure)
- Better Accessibility (screen readers)
- Cleaner & maintainable code
- Industry best practice
3. Common HTML Semantic Elements
<header>
Represents introductory content or top section.
<nav>
Contains navigation links.
<main>
Main content of the page (only one per page).
<section>
A thematic grouping of content.
<article>
Independent, reusable content (blog, news, post).
<aside>
Side content related to main content (sidebar, ads).
<footer>
Bottom section of page or section.
4. Other Useful Semantic Elements
| Element | Purpose |
|---|---|
<figure> | Media content |
<figcaption> | Caption for figure |
<time> | Date & time |
<address> | Contact info |
<mark> | Highlighted text |
Example:
5. Complete Semantic Page Layout Example
6. Semantic vs Non-Semantic (Quick Comparison)
| Semantic | Non-Semantic |
|---|---|
<header> | <div> |
<nav> | <div> |
<section> | <div> |
<article> | <div> |
<footer> | <div> |
Rule: Use semantic tags first, <div> only when needed.
Common Mistakes
- Using
<div>everywhere - Multiple
<main>elements - Using
<section>without headings - Ignoring accessibility
Key Points to Remember
Semantic HTML gives meaning
Improves SEO & accessibility
Easier to maintain
Preferred in modern web development
<div>is generic, semantics are specific
