📐 Semantic HTML = Better Structure
Divs everywhere are messy. Semantic elements give meaning. Accessibility, SEO, readability.
❌ Non-Semantic
<div class="header">
<div class="nav"></div>
</div>
<div class="main">
<div class="article"></div>
<div class="aside"></div>
</div>
<div class="footer"></div>
✅ Semantic
<header>
<nav></nav>
</header>
<main>
<article></article>
<aside></aside>
</main>
<footer></footer>
📝 Semantic Elements
<header> - Page header <nav> - Navigation links <main> - Main content (only one per page) <article> - Self-contained content (blog post) <section> - Thematic grouping <aside> - Sidebar, related content <footer> - Page footer <figure> - Media with caption <figcaption> - Caption for figure <time> - Date and time <mark> - Highlighted text <details> - Collapsible content <summary> - Summary for details <address> - Contact information <blockquote> - Quoted content <cite> - Citation # Semantic Benefits - Accessibility (screen readers understand) - SEO (search engines understand) - Readability (self-documenting code) - Maintainability (easier to update) - Future-proof (standardized)
💡 Semantic Benefits
- Accessibility (screen readers understand)
- SEO (search engines understand)
- Readability (self-documenting code)
- Maintainability (easier to update)
- Future-proof (standardized)
“Semantic HTML gives meaning. Accessibility, SEO, clarity. Essential for web development.”