BitWithBite
Full-Stack · Quick Reference
Lesson 5 — Semantic HTML5 Cheat Sheet
In one line: Semantic tags describe the meaning of content, not just its appearance — helping accessibility, SEO, and readability.
Key Ideas
1<header> intro content — usually a logo and nav.
2<nav> the primary navigation links.
3<main> the page's unique content — one per page.
4<section> / <article> thematic groupings vs standalone content.
5<aside> / <footer> tangential content / closing info.
Structure Example
<header><nav>...</nav></header>
<main>
<section>
<article>Post 1</article>
</section>
<aside>Related links</aside>
</main>
<footer>© 2026</footer>