Advanced HTML5 Semantic Architecture
Lesson 16 • Advanced Track
What You'll Learn
💡 Think of It Like This
Imagine a newspaper: It has a masthead (header), the main story (main), individual articles (article), a sidebar with related links (aside), and fine print at the bottom (footer). Semantic HTML mirrors this structure so browsers, search engines, and screen readers understand your page like a human would.
| Element | Purpose | Screen Reader Role |
|---|---|---|
<header> | Site or section heading area | banner |
<nav> | Navigation links | navigation |
<main> | Primary page content (only one!) | main |
<article> | Self-contained content (blog post, news) | article |
<section> | Thematic grouping with a heading | region |
<aside> | Sidebar, related content, ads | complementary |
<footer> | Footer information, copyright | contentinfo |
Semantic Page Structure
Here's a complete blog-style page using every semantic element correctly.
Full Semantic Page Layout
A complete page using header, nav, main, article, aside, and footer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic Page</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0f172a; font-family: system-ui, sans-serif; color: #e5e7eb; }
header {
background: #1e293b;
padding: 20px 30px;
border-bottom: 2px solid #3b82f6;
}
header h1 { color: #3b82f6; font-size: 1.5rem; }
nav {
background: #1e293b;
padding: 10px 30px;
display: flex;
...Div Soup vs Semantic HTML
See the difference between a page built with divs and one with semantic elements.
Before & After: Div Soup Fix
Transform meaningless divs into meaningful semantic elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Div Soup Fix</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0f172a; font-family: system-ui, sans-serif; color: #e5e7eb; padding: 20px; }
.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.bad, .good { padding: 20px; border-radius: 8px; }
.bad { background: #7f1d1d; border: 2px solid #ef4444; }
.good { background:
...⚠️ Common Mistakes
- Multiple <main> elements — A page should have only ONE
<main>. It represents the unique content of the page. - Using <section> without a heading — Every
<section>should have an h2–h6 to describe it. If it doesn't need a heading, a<div>might be more appropriate. - Confusing <article> and <section> — An article is self-contained (could be syndicated). A section is a thematic grouping within a page.
- Wrapping everything in <article> — Only use article for content that makes sense independently (blog post, news story, product card).
🎉 Lesson Complete
You now know how to architect pages with semantic HTML5 elements:
- ✅ Use
<header>,<main>,<footer>for page-level structure - ✅ Wrap standalone content in
<article>, themed groups in<section> - ✅ Use
<nav>for navigation and<aside>for sidebars - ✅ Semantic HTML improves SEO, accessibility, and code readability
Sign up for free to track which lessons you've completed and get learning reminders.