Why "Meaning" Matters in HTML
Up to now you've mostly used generic building blocks. But HTML5 gives you tags that describe what a piece of content is, not just how it looks. That's called semantic HTML — and it's the difference between a page a machine can understand and one it can only render.
<!-- Non-semantic: a div tells nobody what it holds --> <div class="top">My Site</div> <!-- Semantic: header says exactly what it is --> <header>My Site</header>
Both examples can look identical in the browser once styled. The difference lives underneath — in what a screen reader announces, what a search engine indexes, and what another developer instantly understands.
- ✓Semantic tags describe the role of content — header, navigation, article, and so on.
- ✓They improve accessibility, SEO, and code readability, all at once.
- ✓<div> and <span> still have a place — just not for content that already has a semantic tag.
header, nav, main, footer
These four tags describe the major regions of a page. Every well-structured page tends to use all four in some form.
<header> <h1>My Portfolio</h1> <nav> <a href="#about">About</a> <a href="#work">Work</a> </nav> </header> <main> <!-- the page's one-of-a-kind content goes here --> </main> <footer> <p>© 2026 My Portfolio</p> </footer>
<main> should appear only once per page, and should hold content unique to that page — not sitewide navigation or repeated sidebars.
section, article & aside
Inside <main>, three more tags help you break content into meaningful chunks.
A thematic grouping of content, usually with its own heading — like a "Skills" or "Projects" block.
Content that could stand alone and be distributed on its own — a blog post, a news story, a product card.
Content tangentially related to the main content — a sidebar, a pull-quote, related links.
<section> <h2>Latest Posts</h2> <article> <h3>Learning Semantic HTML</h3> <p>Why meaning beats markup...</p> </article> <aside> <p>Related: CSS Basics</p> </aside> </section>
Ask yourself: "If I copied this piece of content into a completely different site, would it still make sense on its own?" If yes, it's probably an <article>. If it only makes sense as one part of a bigger whole, it's a <section>.
Breaking Down What You Just Learned
<header> / <footer>Mark the top and bottom regions of a page or a section within it.
<nav>Wraps a block of major navigation links, distinct from every other link on the page.
<main>Holds the single, unique content of the page — used exactly once.
<section> / <article>Group related content thematically, or mark content that could stand entirely on its own.
<aside>Sets apart content that's related to but separate from the main flow, like a sidebar.
Try It Yourself
Rewrite a page you built with only <div> tags so far, swapping the top section for <header>, the nav links for <nav>, the main content for <main>, and the bottom section for <footer>.
Build a Semantic Blog Layout
A page built entirely from semantic tags
Create a new file called day9.html inside your course folder and build a simple blog homepage.
- Start with the full DOCTYPE, html, head, and body structure.
- Add a <header> with a site title and a <nav> containing at least three links.
- Add a <main> with one <section> titled "Latest Posts."
- Inside that section, add two <article> elements, each with its own heading and paragraph.
- Add an <aside> next to the section with a short "About the Author" blurb.
- Close with a <footer> containing a copyright line.
Recap
Mark the top and bottom regions of a page or section.
Wraps a page's primary block of navigation links.
Holds the one unique piece of content on the page.
Group, isolate, or set apart pieces of content by meaning.
Key Takeaways
- Semantic tags describe what content is, not just how it should look.
- <header>, <nav>, <main>, and <footer> define the major regions of a page.
- <section> groups related content; <article> marks content that stands alone.
- <aside> sets apart tangential content like sidebars or related links.
- Reach for <div> only when no semantic tag fits the content's role.