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.
