Semantic HTML refers to using HTML tags that clearly describe their meaning and purpose.
- Instead of generic tags like
<div>or<span>, semantic tags convey structure and content type. - Examples:
<header>,<footer>,<article>,<section>,<nav>,<aside>.
🔹 Why Semantic HTML is Important
- Accessibility
- Screen readers and assistive technologies can understand the page better.
- Example:
<nav>signals a navigation menu to visually impaired users.
- SEO (Search Engine Optimization)
- Search engines understand the content structure.
- Example:
<article>indicates main content that should be indexed.
- Maintainable Code
- Makes the code easier to read and maintain.
- Example:
<header>is self-explanatory compared to<div class="header">.
- Better Browser Support
- Modern browsers apply default styles to some semantic tags.
🧩 Common Semantic Tags
| Tag | Purpose |
|---|---|
<header> |
Page or section header |
<footer> |
Page or section footer |
<nav> |
Navigation links |
<main> |
Main content of the page |
<section> |
Thematic grouping of content |
<article> |
Independent, self-contained content piece |
<aside> |
Sidebar or tangential content |
✅ Example: Semantic HTML Structure
<body>
<header>
<h1>My Website</h1>
<nav> ... </nav>
</header>
<main>
<article>
<h2>Blog Post</h2>
<p>Content goes here...</p>
</article>
<aside>
<h3>Related Links</h3>
</aside>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
</body>
In short:
Semantic HTML improves accessibility, SEO, maintainability, and readability by giving meaningful structure to web pages.
