<article> – Main blog post contentQuest 1 • Lesson 6
🧱 Semantic HTML
Semantic HTML uses elements that clearly describe their meaning to both the browser and the developer. Instead of a generic <div>, you use <header>, <nav>, <main>, and <footer>. This improves accessibility and SEO.
"Screen readers rely on semantic tags to navigate a page. Search engines also give higher importance to content inside <main> and <article>."
🏷️ Common Semantic Elements
<header> – introductory content, logo, navigation.<nav> – major navigation links.<main> – the dominant content of the page (only one).<article> – self‑contained composition (blog post, news story).<section> – thematic grouping of content.<aside> – sidebar, tangentially related content.<footer> – footer with copyright, links, contact info.
semantic.html
<body>
<header>
<h1>My Website</h1>
<nav>
<a href="#">Home</a>
</nav>
</header>
<main>
<article>
<h2>Blog Post</h2>
<p>Content...</p>
</article>
</main>
<footer>
<p>© 2026 My Website</p>
</footer>
</body>
<header>
<h1>My Website</h1>
<nav>
<a href="#">Home</a>
</nav>
</header>
<main>
<article>
<h2>Blog Post</h2>
<p>Content...</p>
</article>
</main>
<footer>
<p>© 2026 My Website</p>
</footer>
</body>
🔍 Live Preview (Semantic Layout)
<header> – Logo + site title<main>
✨ Challenge: Convert a <div>-based layout to semantic
Given this non‑semantic structure, rewrite it using semantic tags:
<div class="header">Header</div>
<div class="nav">Links</div>
<div class="content">Main article</div>
<div class="footer">Footer</div>
<div class="nav">Links</div>
<div class="content">Main article</div>
<div class="footer">Footer</div>
<header>Header</header>
<nav>Links</nav>
<main>Main article</main>
<footer>Footer</footer>
<nav>Links</nav>
<main>Main article</main>
<footer>Footer</footer>
❤️ Support Free Education
This course is 100% free. If it helps you, consider buying me a coffee.
☕ Buy Me a Coffee➡️ Ready for more?
Next lesson: CSS Basics – style your HTML.
Continue to Lesson 1.7 →(Coming soon – check back or buy Pro Pack for instant access)