For years, developers relied on generic <div> tags to build layouts, resulting in 'div soup'—code that lacked any inherent meaning. HTML5 Semantic Tags explicitly describe their purpose to both the browser and the developer, significantly improving accessibility.
1Defining the Document Layout
A standard semantic layout follows a predictable hierarchy. The <header> identifies the top of the page, usually containing your branding and navigation. The <main> tag is the singular heart of your document, containing the core content unique to that page. You should never have more than one <main> tag per page. The <footer> anchors the bottom, housing copyright, secondary links, and contact information. This logical structure empowers browsers and assistive tech to instantaneously 'map' your page.
2Content Grouping: Section vs. Article
Understanding the difference between <section> and <article> is a core architectural skill. Use a <section> to group related thematic content together—like a 'Features' section or a 'Contact' block. Use an <article> for content that is entirely self-contained and could theoretically be syndicated independently (such as a blog post, news story, or product review). If the block can exist on its own without losing meaning, it fundamentally belongs in an <article> tag.
3Contextual Landmarks: Aside & Nav
The <aside> tag is leveraged for content that is 'tangentially' related to the primary narrative. Think of sidebar ads, author biographies, or supplementary links. It injects vital context without polluting the core reading flow within the <main> area. Screen readers isolate the <aside>, allowing users to intelligently skip it. Similarly, the <nav> element designates a block strictly for major navigational links. It acts as an unmistakable landmark for assistive tech to locate the site's primary menus.
4Step-by-Step Breakdown
Introduction to Semantic Landmarks. For years, developers relied on generic <div> tags to build layouts, resulting in 'div soup'—code that lacked any inherent meaning. HTML5 introduced Semantic Tags to solve this. These tags explicitly describe their purpose to both the browser and the developer, significantly improving accessibility for screen readers and providing critical context for search engine crawlers. Mastering these landmarks is the difference between a website that is merely a collection of rectangles and one that is a well-structured, logical document.
Defining the Document Layout. A standard semantic layout follows a predictable hierarchy. The <header> identifies the top of the page, usually containing your branding and navigation. The <main> tag is the singular heart of your document, containing the core content unique to that page. You should never have more than one <main> tag per page. The <footer> anchors the bottom, housing copyright, secondary links, and contact information. This structure allows browsers to 'map' your page instantly.
Checkpoint: Which tag must be used EXACTLY ONCE per page and acts as the singular container for the primary, unique content of the document?
- →<header>
- →<main>
- →<section>
- →<body>
Content Grouping: Section vs. Article. Understanding the difference between <section> and <article> is a core architectural skill. Use a <section> to group related thematic content together—like a 'Features' section or a 'Contact' block. Use an <article> for content that is self-contained and could theoretically be syndicated independently, such as a blog post, a news story, or a product review. If it can exist on its own without losing meaning, it belongs in an <article>.
Checkpoint: Semantic tags provide structural meaning. If you are marking up a blog post that could be syndicated to a news aggregator and still make perfect sense, which tag is the most semantically correct choice?
- →<div>
- →<section>
- →<article>
Contextual Landmarks: Aside. The <aside> tag is used for content that is 'tangentially' related to the primary main content. Think of sidebar ads, author bios, or supplementary lists of links. It provides vital context without distracting from the primary narrative found within the <main> area. Screen readers treat the <aside> as a separate landmark, allowing users to move through it or skip it as needed, which maintains a clean, logical reading flow.
Checkpoint: Which tag would you use for a sidebar containing advertisements and related links that are tangential to the main article?
- →<section>
- →<aside>
- →<nav>
- →<sidebar>
Navigation Landmarks: Nav. The <nav> element designates a section containing navigation links. This helps screen readers and search engines identify major blocks of navigation on your site, such as a main menu, table of contents, or breadcrumbs. Note that not all groups of links should be in a <nav>—it is meant specifically for major navigation blocks.
Checkpoint: Which semantic landmark is designated specifically for content that acts as a container for primary page links and navigation, helping assistive technology users find their way around your application?
- →<header>
- →<nav>
- →<div>
The Figure and Figcaption Tags. When embedding images, charts, or code snippets, you often need to provide a caption. The <figure> and <figcaption> tags were introduced to explicitly link a piece of media with its description. This ensures that screen readers announce the caption immediately when encountering the image, providing perfect context for visually impaired users.
Checkpoint: Which tag pairs are used to semantically group an image with its descriptive text?
- →div and span
- →image and description
- →figure and figcaption
- →container and caption
Text-Level Semantics: Time and Mark. Semantics aren't just for large layout blocks. HTML5 introduced inline semantic tags like <time> and <mark>. The <time> tag allows you to provide a machine-readable date-time format for search engines, while <mark> is used to highlight text for reference purposes, semantically indicating relevance.
Semantic Mastery Achieved. Semantic mastery achieved! You now possess the architectural vocabulary to build layouts that are structurally sound, semantically rich, and fully accessible. Your code no longer relies on generic boxes; it tells a clear story to every browser and crawler that touches it.
Cover The Full Landmark Set. A complete semantic page includes header, nav, main, and footer.
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)
1Each Landmark Tag Is Announced by Role in a Landmarks List
Screen readers let users pull up a list of all landmark regions on a page (header, nav, main, aside, footer) and jump directly to any of them. A page built from `<div>`s with no semantic tags offers no such list at all, forcing linear navigation through everything.
2There Should Be Exactly One `<main>` Per Page
`<main>` signals the primary content region that a screen reader's 'skip to main content' shortcut jumps to. Multiple `<main>` elements (or none at all) breaks that single, predictable jump target.
SEO Implications
- 1
Semantic Landmarks Help Crawlers Separate Boilerplate From Unique Content
Wrapping repeated site chrome in `<header>`, `<nav>`, and `<footer>` while reserving `<main>` for the actual page-specific content helps search engines correctly weight what's unique to this page versus what's repeated site-wide template.
- 2
`<article>` Signals Independently Distributable Content
Content wrapped in `<article>` (a blog post, a news story, a product card) is treated as something that could stand alone if syndicated elsewhere — a stronger signal of self-contained, indexable value than a generic `<div>`.
Best Practices
Reserve `<aside>` for Genuinely Tangential Content
`<aside>` means content related to but separate from the main flow (a pull quote, a related-links widget) — don't use it for a visually sidebar-positioned element that's actually core content, since that misrepresents its relationship to screen readers.
Use `<section>` Only When a Heading Is Present
The spec expects a `<section>` to have its own heading — a `<section>` with no heading at all is usually better expressed as a plain `<div>`, since without a heading it provides no real semantic grouping value over a generic container.
Frequent Bugs
A screen reader's 'skip to main content' shortcut lands in the wrong place or doesn't work at all.
The page either has no `<main>` element, or has more than one. There must be exactly one `<main>` per page, wrapping the primary unique content, for this navigation shortcut to behave predictably.
Landmark navigation in a screen reader shows a confusing number of unlabeled, generically-named regions.
Too many `<section>` elements are being used without their own heading, or multiple `<nav>`s lack distinguishing `aria-label`s. Reserve `<section>` for content with a genuine heading, and label multiple same-type landmarks distinctly.
Real-World Examples
Full-Page Semantic Skeleton
A typical article page uses every major landmark tag for its intended purpose: site-wide header and nav, a single main region containing the actual article, a related-content aside, and a footer.
<header><nav aria-label="Primary">...</nav></header>
<main>
<article>
<h1>Article Title</h1>
<p>...</p>
</article>
<aside aria-label="Related articles">...</aside>
</main>
<footer>...</footer>