Sectioning & Semantic Layout - HTML reference 2026 vdsology
- Chapter 3 — Sectioning & Semantic Layout
Chapter 3 — Sectioning & Semantic Layout
Sectioning elements define the document outline — the structure of your content at a high level. They tell browsers, assistive technologies, and search engines what the page is about and how its parts relate to each other.
3.1 — <body>
The body element represents the content of the document. There can only be one <body> per document.
No element-specific attributes (the legacy event attributes like onload are obsolete — use JavaScript event listeners).
Nesting rules: Must be the second child of <html>, after <head>. Contains all flow content — everything visible on the page.
3.2 — <article>
Represents a self-contained, independently distributable piece of content. Could be syndicated without losing meaning. Ask: “Would this make sense if lifted out of the page entirely?”
Implicit ARIA role: article
No element-specific attributes.
Use for: Blog posts, news articles, forum posts, user comments, product cards, social media posts, independent widgets.
Do NOT use for: Page sections that only make sense in context, navigation areas, sidebars.
<!-- Blog post -->
<article>
<header>
<h1>Understanding CSS Grid</h1>
<p>Published <time datetime="2026-04-26">April 26, 2026</time> by Alice Smith</p>
</header>
<p>CSS Grid is a two-dimensional layout system…</p>
<footer>
<p>Tags: <a href="/tag/css">CSS</a>, <a href="/tag/layout">Layout</a></p>
</footer>
</article>
<!-- User comment within an article: nested articles -->
<article class="comment">
<header><strong>Bob</strong> replied:</header>
<p>Great article!</p>
</article>
Nesting rules: Can nest inside <main>, <section>, other <article> elements, or directly in <body>. Can contain <header>, <footer>, <h1>–<h6>, and any flow content. Nested <article> elements represent related sub-articles (e.g., comments).
3.3 — <section>
Represents a thematic grouping of content that belongs together and typically has a heading. A section is a part of something; an article stands alone.
Implicit ARIA role: region (only when the section has an accessible name via aria-label or aria-labelledby); otherwise no corresponding ARIA landmark.
No element-specific attributes.
Use for: Chapter divisions, tabbed content panels (one <section> per panel), themed content groups within an article or page.
Do NOT use for: Generic grouping (use <div>), navigation (use <nav>), sidebars (use <aside>), self-contained content (use <article>).
<article>
<h1>The History of the Web</h1>
<section aria-labelledby="origins-heading">
<h2 id="origins-heading">Origins (1989–1993)</h2>
<p>Tim Berners-Lee invented the World Wide Web…</p>
</section>
<section aria-labelledby="growth-heading">
<h2 id="growth-heading">The Growth Years (1994–2000)</h2>
<p>The browser wars began…</p>
</section>
</article>
Rule: Always give <section> a heading — either a visible <h1>–<h6> or an aria-label / aria-labelledby.
3.4 — <nav>
Represents a navigation landmark — a section containing navigation links.
Implicit ARIA role: navigation
No element-specific attributes.
Use for: Primary site navigation, secondary navigation menus, breadcrumbs, table of contents, pagination controls.
Rule: If a page has multiple <nav> elements, distinguish them with aria-label.
<!-- Primary navigation -->
<nav aria-label="Primary">
<ul>
<li><a href="/" aria-current="page">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
<!-- Breadcrumb -->
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/blog/css" aria-current="page">CSS</a></li>
</ol>
</nav>
<!-- Pagination -->
<nav aria-label="Pagination">
<a href="/blog?page=1" rel="prev">← Previous</a>
<a href="/blog?page=3" rel="next">Next →</a>
</nav>
3.5 — <main>
Represents the main content of the document — the content directly related to or expanding upon the document’s central topic. Excludes content repeated across pages (header, nav, footer, sidebar).
Implicit ARIA role: main
No element-specific attributes.
Rules:
- There must be only one visible
<main>per document (others must havehidden) - Must not be a descendant of
<article>,<aside>,<footer>,<header>, or<nav>
<body>
<header>…</header>
<nav>…</nav>
<main id="main-content">
<h1>Welcome to Our Blog</h1>
<article>…</article>
</main>
<aside>…</aside>
<footer>…</footer>
</body>
Skip navigation link:
<a href="#main-content" class="skip-link">Skip to main content</a>
<main id="main-content">…</main>
3.6 — <aside>
Represents content that is tangentially related to the content around it — content that could be considered separate from the main content but related to it.
Implicit ARIA role: complementary
No element-specific attributes.
Use for: Sidebars, pull quotes, advertising blocks, supplementary information, related links.
<main>
<article>
<h1>CSS Grid Tutorial</h1>
<p>…</p>
<aside>
<h2>Related Articles</h2>
<ul>
<li><a href="/flexbox">CSS Flexbox Guide</a></li>
<li><a href="/layouts">Modern Layout Techniques</a></li>
</ul>
</aside>
<p>…</p>
</article>
</main>
3.7 — <header>
Represents introductory content for its nearest sectioning ancestor (<article>, <section>, <nav>, <aside>) or, if there is none, for the whole page.
Implicit ARIA role:
banner— when a direct descendant of<body>(the page header)- No corresponding ARIA role — when nested inside a sectioning element
No element-specific attributes.
Use for: Page header (logo, site name, primary nav), article headers (title, author, publish date, tags).
<!-- Page header: role=banner -->
<header>
<a href="/" class="logo">MyBlog</a>
<nav aria-label="Primary">…</nav>
<button type="button" aria-expanded="false" aria-controls="user-menu">
Account ▼
</button>
</header>
<!-- Article header: no landmark role -->
<article>
<header>
<h1>Understanding Flexbox</h1>
<p>By <a href="/authors/alice">Alice</a> ·
<time datetime="2026-04-01">1 April 2026</time></p>
</header>
<p>…</p>
</article>
3.8 — <footer>
Represents footer content for its nearest sectioning ancestor or the whole page.
Implicit ARIA role:
contentinfo— when a direct descendant of<body>(the page footer)- No corresponding ARIA role — when nested inside a sectioning element
No element-specific attributes.
<!-- Page footer: role=contentinfo -->
<footer>
<nav aria-label="Footer links">
<a href="/privacy">Privacy Policy</a>
<a href="/terms">Terms of Service</a>
<a href="/sitemap">Sitemap</a>
</nav>
<p>© 2026 MyBlog. All rights reserved.</p>
</footer>
<!-- Article footer -->
<article>
<p>…</p>
<footer>
<p>Tags: <a href="/tag/css">CSS</a>, <a href="/tag/grid">Grid</a></p>
<p>Last updated: <time datetime="2026-04-26">26 April 2026</time></p>
</footer>
</article>
3.9 — <address>
Represents contact information for its nearest <article> or <body> ancestor. Not for all addresses — only contact information for the author or maintainer of the content.
Implicit ARIA role: No corresponding role.
No element-specific attributes.
<!-- Contact info for the whole page (in a footer) -->
<footer>
<address>
<a href="mailto:hello@example.com">hello@example.com</a><br>
<a href="tel:+441234567890">+44 1234 567890</a><br>
123 Web Street, London, UK
</address>
</footer>
<!-- Contact info for an article's author -->
<article>
<address>
Written by <a href="/authors/alice">Alice Smith</a>
</address>
<p>…</p>
</article>
Rule: Do NOT use <address> for postal addresses unrelated to the document’s contact information. For generic postal addresses, use <p> or <div>.
3.10 — <search> (New — cross-browser October 2023)
Represents a section containing search or filtering controls — the search form and any related search UI.
Implicit ARIA role: search
No element-specific attributes.
<search>
<form action="/search" method="get">
<label for="q">Search</label>
<input type="search" id="q" name="q"
placeholder="Search articles…"
enterkeyhint="search">
<button type="submit">Search</button>
</form>
</search>
<!-- Site-wide search in header -->
<header>
<a href="/" class="logo">MySite</a>
<search>
<form action="/search" method="get" role="search">
<input type="search" name="q" aria-label="Search the site">
<button type="submit">Go</button>
</form>
</search>
</header>
3.11 — <hgroup>
Groups a heading (<h1>–<h6>) with related content that supplements it — typically subtitles, taglines, or publication dates. The heading and its companion content are treated as a single heading for the document outline.
Implicit ARIA role: No corresponding role.
Content model: One <h1>–<h6> element plus any number of <p> elements.
<hgroup>
<h1>Understanding CSS Grid</h1>
<p>A complete visual guide to two-dimensional layout</p>
</hgroup>
<hgroup>
<h2>Chapter 4</h2>
<p>Advanced Grid Patterns</p>
</hgroup>
<!-- In article header -->
<article>
<header>
<hgroup>
<h1>The Future of AI</h1>
<p>How machine learning is reshaping software development</p>
</hgroup>
<p>By Alice Smith · April 26, 2026</p>
</header>
</article>
3.12 — <h1> – <h6> — Headings
Six levels of headings defining the document’s information hierarchy.
Implicit ARIA roles: heading with aria-level 1–6.
No element-specific attributes — globals only.
Heading Rules
Use headings to structure content, not for visual styling. Use CSS to change heading appearance.
Sequential hierarchy: Don’t skip levels going downward. <h1> → <h2> → <h3> is correct. <h1> → <h3> (skipping <h2>) is wrong.
One <h1> per page: The Living Standard no longer enforces this algorithmically, but it remains the recommended practice for clear document structure.
May 2025 spec change: The HTML Living Standard removed the algorithm that caused nested <h1> elements to render at smaller sizes based on sectioning context. As of May 2025, all <h1> elements render at the same size regardless of nesting. Always use explicit <h2>–<h6> for subsection headings.
<body>
<h1>Main Page Title</h1> <!-- One per page -->
<section>
<h2>Major Section</h2> <!-- Level 2 -->
<section>
<h3>Subsection</h3> <!-- Level 3 -->
<h4>Sub-subsection</h4> <!-- Level 4 -->
</section>
</section>
<section>
<h2>Another Major Section</h2> <!-- Back to level 2 -->
</section>
</body>
3.13 — Landmark Roles Reference
| Element | Landmark role | Condition |
|---|---|---|
<header> |
banner |
Direct child of <body> |
<footer> |
contentinfo |
Direct child of <body> |
<main> |
main |
Always |
<nav> |
navigation |
Always |
<aside> |
complementary |
Always |
<search> |
search |
Always |
<section> |
region |
Only when named via aria-label/aria-labelledby |
<article> |
article |
Always |
<form> |
form |
Only when named |
<h1>–<h6> |
heading (level 1–6) |
Always |
3.14 — Element Decision Tree
Is the content completely standalone?
→ YES: <article>
Is it a navigation section?
→ YES: <nav>
Is it the primary content of the page?
→ YES: <main>
Is it tangentially related to surrounding content?
→ YES: <aside>
Is it a thematic grouping with a heading?
→ YES: <section>
Is it introductory content or a title block?
→ YES: <header>
Is it a footer or metadata block?
→ YES: <footer>
Is it a search/filter form?
→ YES: <search>
Is it purely for layout/styling?
→ YES: <div>
Tags: #html #vdsology #webdevelopment #vdsologyhtml #html5 #htmlreference #htmlreference2026
Write a comment