📖 Notes
LESSON 05 OF 32
Semantic HTML5 — header, nav, main, footer
Semantic HTML Matters
Semantic tags improve SEO, accessibility and readability.
Semantic Tags
Structure That Means Something
🔝
<header>
Top of the page or a section — usually logo + nav.
🧭
<nav>
Navigation links, wrapped so screen readers can jump to it.
📄
<main>
The primary content — exactly one per page.
📦
<section> / <article>
A thematic group vs. self-contained content (like a blog post).
- <aside> — sidebar content, tangential to the main content
- <footer> — bottom of the page or section
A Semantic Page Skeleton
HTML<body>
<header>
<nav>
<a href="/">Home</a>
<a href="/courses">Courses</a>
</nav>
</header>
<main>
<article>
<h1>Article Title</h1>
<p>Content here...</p>
</article>
</main>
<footer>
<p>© 2026 BitWithBite</p>
</footer>
</body>
🔍
Why this helps SEO
Search engines weight content inside <main> and <article> more heavily than a generic <div> soup, since semantic tags explicitly tell the crawler what's actually the page's content versus navigation or boilerplate.