Before HTML5, the web was built using 'Div Soup'—a chaotic sea of generic `<div>` tags. While this achieved visual layouts via CSS, it provided absolutely zero structural meaning to the browser. Today, we build professional architecture using HTML5 Semantic Landmarks.
1The Singular Core: `<main>`
The foundation of any accessible document is the <main> tag. This tag operates under a strict architectural rule: there must only be ONE visible <main> tag per HTML document.
It serves as the singular container for the primary, unique content of the page. It must NOT contain globally repeated elements like site-wide navigation bars, copyright footers, or persistent sidebars. For visually impaired users operating screen readers, the <main> tag provides a programmatic shortcut to instantly bypass boilerplate UI and jump straight to the actual content.
2Isolation: Article vs. Section
The distinction between <article> and <section> dictates how crawlers process your data payload.
An <article> designates content that is completely self-contained. If you extract this block and paste it onto a different website, it still makes perfect sense (e.g., a blog post, a news card, a product review).
A <section> designates thematic grouping that requires external context. A 'Features' block or a 'Testimonials' grid makes sense on your landing page, but isolated on its own, it loses narrative coherence.
3Tangential Contexts: `<aside>`
Not all content is mission-critical to the immediate narrative. The <aside> tag classifies data blocks that are 'tangentially related'.
Architecturally, this means sidebars, advertisement grids, or pull quotes. If you strip the <aside> entirely out of the DOM, the primary <main> narrative must still function perfectly. By flagging this data as <aside>, screen readers know they can safely skip it if the user is focused strictly on the core reading material.
4Step-by-Step Breakdown
Introduction to Semantic Landmarks. Before HTML5, the web was built using 'Div Soup'—a chaotic sea of generic <div id="header"> and <div class="sidebar"> tags. While this achieved visual layouts via CSS, it provided absolutely zero structural meaning to the browser. Today, we build professional architecture using HTML5 Semantic Landmarks. These tags explicitly describe their purpose, making your code cleaner, dramatically improving accessibility for screen readers, and providing critical context for Search Engine Optimization (SEO).
The Header and Nav. The <header> tag serves as the introductory gateway to your page or a specific section. It typically contains your brand logo, search bars, and the primary navigation. Inside the header, we use the <nav> tag. The <nav> specifically identifies a major block of navigational links. By using these tags instead of generic <div>s, assistive technologies can instantly identify the top of the document and allow visually impaired users to jump directly to your menu.
The Main Content Area. The <main> tag is the absolute star of the show. It represents the dominant, unique content of the document. Crucially, there should only ever be one visible <main> tag per HTML page. It should not contain content that is repeated across the site, such as sidebars, navigation links, or site logos. This tag is the primary target for 'Skip to Content' links used in accessibility routing.
Checkpoint: What is the primary semantic role of the <main> tag within an HTML document?
- →To contain the navigation links
- →To hold content unique to that page
- →To contain footer links
- →To group sidebars and ads
Checkpoint: Screen readers rely on semantic landmarks to provide shortcuts for users. Which specific tag should replace <div class="navigation"> to explicitly inform assistive technologies where the primary site links are located?
- →<header>
- →<menu>
- →<nav>
- →<links>
Article vs. Section. Understanding the difference between <article> and <section> is a core architectural skill. Use an <article> for content that is entirely self-contained—like a blog post, a news card, or a forum comment. It makes perfect sense even if extracted and read somewhere else. Use a <section> for thematic grouping within a larger document. For example, a single page might have a <section> for 'Features' and another <section> for 'Testimonials'.
Checkpoint: Content syndication (like RSS feeds) relies on accurate semantic tagging. If you are building a news website, which HTML5 tag is the most semantically correct choice to wrap each individual news story?
- →<div>
- →<section>
- →<article>
- →<main>
Aside and Figure. The <aside> tag holds content that is 'tangentially' related to the main narrative, typically used for sidebars, pull quotes, or advertisements. It sits 'beside' the main flow. When handling complex media, the <figure> tag is used to semantically group an image or chart with its corresponding <figcaption>. This creates an unbreakable, logical link between the visual data and its text description, which is vital for academic papers or data-heavy articles.
The Footer. Finally, the <footer> anchors the bottom of the page or the bottom of a specific <article>. It typically houses copyright information, secondary legal links (like Privacy Policies), or contact data. By capping your document with a <footer>, you complete the logical roadmap of the page, ensuring that both users and machines understand exactly where the content ends.
Semantic Mastery Achieved. Semantic mastery achieved! Your pages are now professionally structured. Visually, they may look similar to generic divs when styled, but structurally, they are a masterpiece of accessibility and SEO optimization. You have built a meaningful architecture. Up next, we will learn how to connect these beautifully structured pages to the rest of the world using Hyperlinks and Navigation.
Use Semantic Content Sectioning. <article> marks standalone content; <aside> marks tangentially related content.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1'Div Soup' Is an Accessibility Failure, Not Just a Style Choice
A page built entirely from generically-classed `<div>` tags gives screen readers absolutely nothing to navigate by — no landmarks, no distinguishable regions. Replacing key structural divs with `<header>`, `<nav>`, `<main>`, and `<footer>` is often the single highest-leverage accessibility fix available.
2`<article>` vs `<section>` Communicates Standalone-ness to Assistive Tech
An `<article>` implies content that would make sense pulled out and read independently (a blog post, a comment) — using it correctly helps screen reader users understand which chunks of a page are self-contained versus part of a larger continuous flow.
SEO Implications
- 1
Semantic Tags Replaced Guesswork With Explicit Structural Signals
Before HTML5, search engines had to infer a page's structure from `<div class="...">` naming conventions with no standardization. `<article>`, `<nav>`, and `<main>` give an explicit, spec-defined signal for what's primary content versus navigation versus supplementary material.
- 2
`<aside>` Content Is Weighted as Supplementary, Not Primary
Search engines treat `<aside>` content as tangential to the main topic — appropriate for a related-links widget, but don't hide content you actually want to rank for inside an `<aside>` expecting it to carry the same topical weight as `<main>` content.
Best Practices
Convert Div Soup Incrementally, Starting With the Biggest Landmarks
When refactoring a legacy page, prioritize replacing the top-level structural divs (header/nav/main/footer) first — these give the largest accessibility and SEO benefit for the least risk, versus attempting a full `<article>`/`<section>` rewrite of every nested block at once.
Don't Semantic-ify Purely for the Sake of It
Not every div needs to become a `<section>` or `<article>`. A layout wrapper that exists purely for CSS Grid/Flexbox purposes, with no independent thematic meaning, is correctly left as a plain `<div>`.
Frequent Bugs
After a 'semantic HTML rewrite,' the page has dozens of `<section>` tags and screen reader navigation is somehow more confusing than before.
Sections were added indiscriminately to every div-like wrapper rather than reserved for genuinely thematic, headed content blocks. Over-using landmark-like tags creates as much noise as div soup — audit and remove `<section>`/`<article>` usage that doesn't correspond to a real standalone content unit.
A component library's generated markup is entirely `<div>`s with utility classes, with no semantic structure at all.
Many UI/CSS frameworks generate purely presentational markup by design — it's the integrator's responsibility to wrap that output in the correct semantic landmarks (`<header>`, `<nav>`, `<main>`) at the page level, since the library itself won't do it for you.
Real-World Examples
Refactoring a Legacy Div-Soup Page
A pre-HTML5 page structure relying entirely on classed divs is incrementally converted to real semantic landmarks, immediately giving screen reader users a navigable structure with zero visual change.
<!-- Before -->
<div class="header">...</div>
<div class="main-content">...</div>
<div class="footer">...</div>
<!-- After -->
<header>...</header>
<main>...</main>
<footer>...</footer>