🏷️ Module 9 · Semantic HTML5🟡 IntermediateLESSON 37
Semantic Tags Deep Dive
Course progress7%
🎯 What you'll learn: The seven core semantic tags —
header, nav, main, section, article, aside, footer — and exactly when to reach for each.
Section 1
header, nav & main
<header> holds introductory content (logo, title, nav) — it can appear once per page or once per section/article. <nav> wraps major navigation links. <main> wraps the page's one primary content area and should appear exactly once per page.
header-nav-main.html
HTML
<header> <h1>BitWithBite</h1> <nav> <a href="/">Home</a> <a href="/courses">Courses</a> </nav> </header> <main> <!-- the one primary content area --> </main>
Section 2
section vs article
This is the most commonly confused pair. <article> is for content that would make sense standalone — a blog post, a product card, a forum comment. <section> is for a thematic grouping within a page that doesn't necessarily stand alone.
section-vs-article.html
HTML
<section> <h2>Latest Posts</h2> <article> <h3>Post Title</h3> <p>Would make sense in an RSS feed, alone.</p> </article> </section>
💡
The "syndication test"
Ask: "would this content still make sense if pulled out and syndicated elsewhere on its own?" If yes, it's an article. If it only makes sense in context, it's a section.
Section 3
aside & footer
<aside> holds content tangentially related to the main content — sidebars, pull quotes, related links. <footer> holds closing information — copyright, contact links, site map — again usable per-page or per-section.
aside-footer.html
HTML
<aside> <h3>Related Articles</h3> <ul>...</ul> </aside> <footer> <p>© 2026 BitWithBite</p> </footer>
| Tag | One per page? | Use for |
|---|---|---|
| header | No — can repeat per section | Intro content, logo, page/section title |
| nav | No — can repeat | Major navigation link groups |
| main | Yes — exactly once | The page's single primary content |
| article | No — can repeat | Self-contained, standalone content |
| section | No — can repeat | Thematic grouping, not standalone |
| aside | No — can repeat | Tangential content, sidebars |
| footer | No — can repeat | Closing info, per page or per section |
🧩 Knowledge Check — Lesson 37
5 questions to test your understanding.
1. How many times should <main> appear on a page?
2. What's the "syndication test" used for?
3. What is aside typically used for?
4. Can footer appear more than once on a page?
5. A single blog post that could be syndicated elsewhere should be wrapped in:
Coding Challenge — Lesson 37
Apply what you learned · Intermediate Level
Challenge: Build a Semantic Blog Layout
Build a page with a header (site title + nav), a main containing a section titled "Recent Posts" with 2 article elements inside, an aside with "Related Links", and a footer with a copyright line.
Build a page with a header (site title + nav), a main containing a section titled "Recent Posts" with 2 article elements inside, an aside with "Related Links", and a footer with a copyright line.
💡 Show hints if you're stuck
- Structure: header → main (section → article, article) + aside → footer
Finished this lesson?
Mark it complete to track your progress.
Lesson 37 of 62Module 9 — Semantic HTML5