📐 Semantic HTML = Meaningful Structure
<div> everywhere is messy. Semantic elements give meaning. Accessibility, SEO, readability — all benefit.
❌ 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 (logo, navigation) <nav> - Navigation links <main> - Main content (only one per page) <article> - Self-contained content (blog post) <section> - Thematic grouping of content <aside> - Sidebar, related content <footer> - Page footer (copyright, links) <figure> - Self-contained media (image 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
🎯 Complete Page Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Blog Post Title</h2>
<time datetime="2024-01-15">January 15, 2024</time>
<p>This is the content of the blog post.</p>
<figure>
<img src="image.jpg" alt="Description">
<figcaption>Image caption</figcaption>
</figure>
<section>
<h3>Section Heading</h3>
<p>Section content...</p>
</section>
</article>
<aside>
<h3>Related Content</h3>
<ul>
<li><a href="#">Related post 1</a></li>
<li><a href="#">Related post 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
<address>
Contact: <a href="mailto:info@example.com">info@example.com</a>
</address>
</footer>
</body>
</html>
💡 Benefits
- Accessibility (screen readers understand)
- SEO (search engines understand)
- Readability (code is self-documenting)
- Maintainability (easier to update)
- Future-proof (standardized)
“Semantic HTML gives meaning. Accessibility, SEO, clarity — all improved. Essential for web development.”