Goal
You’ll be able to choose the correct semantic layout element for a given page region, and understand why these specific elements exist rather than just using generic containers everywhere.
Learn
HTML5 introduced semantic layout elements specifically to replace the older pattern of using generic <div> elements with class names like class=”header” for every structural region. These elements carry real, built-in meaning that assistive technology and search engines understand automatically:
<header>— introductory content for a page or a section, often containing a logo, title, or navigation.<nav>— a block of navigation links, like a main menu or breadcrumb trail.<main>— the primary, unique content of the page. A page should have exactly one <main>, and it should not include repeated content like headers, footers, or sidebars.<section>— a thematic grouping of content, usually with its own heading.<article>— self-contained content that would make sense distributed independently, like a blog post or news story.<aside>— content tangentially related to the main content, like a sidebar or a pull quote.<footer>— closing content for a page or section, often containing copyright info or secondary links.
Using these instead of generic <div class=”header”> gives screen reader users the ability to jump directly between page regions (many screen readers offer shortcuts like “jump to main content” or “jump to navigation”), and gives search engines a clearer structural understanding of the page — both real, practical benefits, not just cleaner-looking code.
Decision Task
A page has a blog post that could reasonably be shared and read independently on its own, like via RSS syndication. Before reading on: <section> or <article>?
Show Answer
<article> — the defining test for article is whether the content would make sense standalone, independent of the rest of the page, like being syndicated or shared elsewhere. A blog post genuinely fits this. <section> is for thematic groupings that don’t necessarily stand alone the same way.
Common Mistake
Using multiple <main> elements on one page, or using <main> for content that repeats across every page (like a header or footer). <main> specifically signals “the unique, primary content of this specific page” — using it more than once, or for shared/repeated content, defeats its actual semantic purpose and can confuse screen reader “jump to main content” navigation.
Practice Questions
1. A page has a sidebar with related links, tangentially connected to the main article but not essential to understanding it. Which element fits?
Show Answer
<aside>
2. Why should a page have exactly one <main> element, not several?
Show Answer
<main> signals the single unique, primary content region of the page; multiple instances would confuse both the semantic meaning and screen reader “jump to main content” shortcuts.
3. A recipe site groups several thematically related recipes together under one shared heading, but the group itself wouldn’t make sense as standalone syndicated content the way one individual recipe might. Which element fits the group: <section> or <article>?
Show Answer
<section> — it’s a thematic grouping, not standalone shareable content on its own.
4. True or False: <nav> should be used for every single link on a page, since all links are technically “navigation.”
Show Answer
False — <nav> is meant for genuine navigation blocks like a main menu or breadcrumb trail, not every individual link scattered through body content.
5. What real, practical accessibility benefit do semantic layout elements provide over generic divs with class names?
Show Answer
They let screen reader users jump directly between page regions using built-in navigation shortcuts (like “jump to main content”), which generic divs with class names don’t provide automatically.
Try It Yourself
Without looking back, sketch (in words or simplified tags) the semantic structure of a typical blog homepage: what top-level semantic elements would you expect to see, and in roughly what order?
Show Answer
A reasonable structure: <header> (site title/logo, nav menu) → <nav> (often nested inside header) → <main> containing one or more <article> elements (blog post previews) → possibly <aside> (sidebar) → <footer> (copyright, secondary links) — order and nesting can vary reasonably, but main should be the single primary content wrapper.
Quick Check
1. What does <main> represent, and how many should a page typically have?
Show Answer
The primary, unique content of the page; typically exactly one.
2. What’s the defining test for whether content should be <article> rather than <section>?
Show Answer
Whether the content would make sense standalone, independent of the rest of the page, like being shared or syndicated elsewhere.
3. What kind of content fits <aside>?
Show Answer
Content tangentially related to the main content, like a sidebar or pull quote.
4. Why shouldn’t <main> include repeated content like headers or footers?
Show Answer
Because <main> specifically signals the unique content of that particular page; repeated/shared content isn’t unique to it.
5. What real search engine benefit do semantic elements provide, beyond accessibility?
Show Answer
They give search engines a clearer structural understanding of which content is genuinely primary/important versus supplementary, helping them index and rank the page more accurately.