Semantic HTML for Content-Heavy Layouts

Patterns for guides, documentation, FAQs, and resource hubs

Course progress

Lesson 1 of 9 – Welcome & why content-heavy layouts are different Lesson 2 of 9 – A semantic skeleton for long pages Lesson 3 of 9 – Headings, outline, and in-page navigation Lesson 4 of 9 – Sections, articles, and asides in long content Lesson 5 of 9 – Multi-column layouts, sidebars, and related content Lesson 6 of 9 – Tables, lists, and structured data blocks Lesson 7 of 9 – Patterns for FAQs, guides, and documentation pages Lesson 8 of 9 – Patterns for category indexes and resource hubs Lesson 9 of 9 – Example layout & semantic checklist

Step 1

Welcome & why content-heavy layouts are different

This tutorial focuses on building semantic HTML structures for content-heavy pages: long guides, documentation, knowledge bases, editorial layouts, and resource libraries. You will learn how to use landmarks, headings, sections, and supporting elements to keep complex pages readable, navigable, and maintainable over time.

The aim is to give you patterns that make large pages understandable without CSS, easy to navigate with assistive technology, and resilient to design changes and framework swaps.

Content-heavy pages are different from simple landing pages. They might include:

  • Multiple sections and subsections.
  • Navigation within the page (tables of contents, “On this page” lists).
  • Supporting content like tips, notes, warnings, or related links.
  • Structured data like tables, FAQs, and code examples.

Without a good semantic structure, these pages become hard to scan, difficult to navigate with assistive tech, and painful to maintain when content is updated.

In this tutorial you will learn:

  • How to create a robust skeleton for long pages using landmarks.
  • How to design a heading outline that makes sense without styling.
  • How to use <section>, <article>, and <aside> together.
  • How to handle sidebars, pull-outs, and related links semantically.
  • How to structure FAQs, guides, indexes, and resource hubs.
Lesson 1 of 9
Step 2

A semantic skeleton for long pages

Content-heavy layouts still start with a simple skeleton: header, main content, and footer. The main difference is that <main> will contain several clearly marked sections.

Pattern: long-page skeleton with landmarks

<body>
  <header class="site-header">
    <div class="site-header__inner">
      <a href="/" class="site-logo">ContentCraft</a>
      <nav class="site-nav" aria-label="Main navigation">
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/guides">Guides</a></li>
          <li><a href="/resources">Resources</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main id="main-content">
    <!-- Content-heavy page structure lives here -->
  </main>

  <footer class="site-footer">
    <p>&copy; 2025 ContentCraft</p>
  </footer>
</body>

Inside <main>, you’ll combine a top-level heading, an optional summary, and then a set of sections or articles.

Pattern: long page header

<main id="main-content">
  <header class="page-header">
    <h1 class="page-header__title">
      Building Content-Heavy Pages with Semantic HTML
    </h1>
    <p class="page-header__summary">
      Learn how to structure guides, documentation, and resource hubs so they are
      easy to navigate, maintain, and redesign.
    </p>
  </header>

  <!-- Sections and sidebars will follow -->
</main>

Quick check: where does the long-page outline live?

On a content-heavy page, where do you place the page heading and the rest of the outlined sections?

Lesson 2 of 9
Step 3

Headings, outline, and in-page navigation

Headings are the backbone of content-heavy layouts. They create an outline that assistive technologies and in-page navigation rely on.

Pattern: heading outline for a long guide

Start with a small set of roles instead of hundreds of direct hex codes: 

<main id="main-content">
  <header class="page-header">
    <h1>Semantic HTML for Content-Heavy Layouts</h1>
    <p>A practical guide for structuring complex pages.</p>
  </header>

  <nav class="page-toc" aria-label="On this page">
    <h2 class="page-toc__title">On this page</h2>
    <ol>
      <li><a href="#intro">1. Introduction</a></li>
      <li><a href="#outline">2. Designing your outline</a></li>
      <li><a href="#sidebars">3. Handling sidebars and related content</a></li>
    </ol>
  </nav>

  <section id="intro">
    <h2>1. Introduction</h2>
    <p>Content-heavy pages require careful structure...</p>
  </section>

  <section id="outline">
    <h2>2. Designing your outline</h2>
    <h3>2.1 Start with user tasks</h3>
    <h3>2.2 Group related topics</h3>
  </section>

  <section id="sidebars">
    <h2>3. Handling sidebars and related content</h2>
  </section>
</main>

Key ideas:

  • Use one <h1> per page for the main title.
  • Use <h2> for top-level sections under the page title.
  • Use <h3> and below for subsections.
  • Anchor IDs on sections (id="intro") allow in-page navigation.

Quick check: heading levels

On a long guide page, after the main <h1>, what level should you typically use for each main section title?

Lesson 3 of 9
Step 4

Sections, articles, and asides in long content

On content-heavy pages, you will typically use a combination of <section>, <article>, and <aside> to express different types of content.

When to use <section>

Use <section> for a thematic grouping of content that has its own heading. 

<section id="getting-started">
  <h2>Getting started</h2>
  <p>This section explains the basics you need before diving in.</p>
</section>

When to use <article>

Use <article> for content that can stand alone and be distributed independently: blog posts, docs pages, news items, or a self-contained guide within a larger section. 

<article class="guide" aria-labelledby="guide-intro-heading">
  <header>
    <h2 id="guide-intro-heading">
      Building an accessible navigation
    </h2>
    <p>A step-by-step guide for beginners.</p>
  </header>

  <section>
    <h3>1. Structure the markup</h3>
    <p>Start by creating a <code>&lt;nav&gt;</code>...</p>
  </section>
</article>

When to use <aside>

Use <aside> for content that supports the main narrative but is not central to it: tips, notes, references, related links, or glossary panels. 

<section>
  <h2>2. Designing your outline</h2>
  <p>Start by listing the key questions your readers have...</p>

  <aside class="note" aria-label="Tip">
    <h3 class="note__title">Tip</h3>
    <p>
      If you find more than 7–9 main sections, consider splitting the guide
      into multiple articles.
    </p>
  </aside>
</section>

Quick check: choosing between section and article

On a documentation home page, you have a series of "Getting Started", "Advanced Usage", and "API Reference" tiles. Each tile links to a full, standalone guide. What wrapper makes sense for each tile?

Lesson 4 of 9
Step 5

Multi-column layouts, sidebars, and related content

Content-heavy layouts often use sidebars for navigation, summaries, or related links. Semantically, this is a great place for <aside>.

Pattern: two-column layout with main content and sidebar

<div class="layout layout--two-column">
  <main class="layout__main" id="article-main">
    <article aria-labelledby="article-title">
      <header>
        <h1 id="article-title">Semantic HTML for Content-Heavy Layouts</h1>
      </header>
      <p>Content goes here...</p>
    </article>
  </main>

  <aside class="layout__sidebar" aria-label="On this page">
    <nav class="sidebar-nav">
      <h2 class="sidebar-nav__title">On this page</h2>
      <ol>
        <li><a href="#step-2">Semantic skeleton</a></li>
        <li><a href="#step-3">Headings &amp; outline</a></li>
        <li><a href="#step-7">Docs patterns</a></li>
      </ol>
    </nav>
  </aside>
</div>

The layout may be done with CSS Grid or Flexbox, but semantics come from <main>, <article>, and <aside>.

Quick check: sidebar wrapper

Which element is the best wrapper for a sidebar containing "On this page" links and related resources on a long guide?

Lesson 5 of 9
Step 6

Tables, lists, and structured data blocks

Content-heavy pages often present dense information: feature comparisons, steps, definitions, or FAQs. Semantic HTML provides specific elements for each.

Pattern: comparison table

<section class="comparison" aria-labelledby="comparison-heading">
  <h2 id="comparison-heading">Feature comparison</h2>

  <table class="comparison-table">
    <caption>Comparison of three layout strategies</caption>
    <thead>
      <tr>
        <th scope="col">Strategy</th>
        <th scope="col">Best for</th>
        <th scope="col">Notes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Single-column</th>
        <td>Linear reading, mobile focus</td>
        <td>Great for long-form articles.</td>
      </tr>
      <tr>
        <th scope="row">Two-column</th>
        <td>Guides with sidebars</td>
        <td>Works well for docs and TOCs.</td>
      </tr>
    </tbody>
  </table>
</section>

Pattern: ordered steps

<section aria-labelledby="steps-heading">
  <h2 id="steps-heading">Refactor workflow</h2>
  <ol>
    <li>List your sections and subsections.</li>
    <li>Map each to <code>&lt;section&gt;</code> or <code>&lt;article&gt;</code>.</li>
    <li>Add headings with logical levels.</li>
    <li>Add sidebars and notes using <code>&lt;aside&gt;</code>.</li>
  </ol>
</section>

Pattern: definition list for terms

<section aria-labelledby="glossary-heading">
  <h2 id="glossary-heading">Key terms</h2>
  <dl>
    <div>
      <dt>Landmark</dt>
      <dd>A region of the page (such as <code>&lt;main&gt;</code>) that helps users navigate quickly.</dd>
    </div>
    <div>
      <dt>Outline</dt>
      <dd>The structure created by headings (<code>h1</code>–<code>h6</code>).</dd>
    </div>
  </dl>
</section>

Quick check: when to use a table

When is using <table> appropriate on a content-heavy page?

Lesson 6 of 9
Step 7

Patterns for FAQs, guides, and documentation pages

Documentation and FAQ pages are classic content-heavy layouts. They benefit from consistent, repeatable patterns.

Pattern: FAQ section

<section class="faq" aria-labelledby="faq-heading">
  <h2 id="faq-heading">Frequently asked questions</h2>

  <dl class="faq__list">
    <div class="faq__item">
      <dt>Do I need to know CSS to use this guide?</dt>
      <dd>
        Basic familiarity helps, but the focus here is on semantic HTML.
      </dd>
    </div>

    <div class="faq__item">
      <dt>Can I use this with my framework?</dt>
      <dd>
        Yes. The patterns work with any styling approach or framework.
      </dd>
    </div>
  </dl>
</section>

Pattern: documentation page layout

<article class="doc" aria-labelledby="doc-title">
  <header class="doc__header">
    <h1 id="doc-title">API Authentication</h1>
    <p>Learn how to authenticate with the ContentCraft API.</p>
  </header>

  <nav class="doc__toc" aria-label="On this page">
    <h2 class="doc__toc-title">On this page</h2>
    <ol>
      <li><a href="#token-auth">Token-based authentication</a></li>
      <li><a href="#errors">Common errors</a></li>
    </ol>
  </nav>

  <section id="token-auth">
    <h2>Token-based authentication</h2>
    <p>To authenticate, send an API token with each request...</p>
  </section>

  <section id="errors">
    <h2>Common errors</h2>
    <p>These are the most frequent issues developers run into...</p>
  </section>
</article>

Quick check: FAQ semantics

Which element is particularly suitable for pairing questions and answers?

Lesson 7 of 9
Step 8

Patterns for category indexes and resource hubs

Content-heavy sites often have index pages or hubs that link out to many individual articles or resources. These are great candidates for semantic lists of <article> cards.

Pattern: category index page

<main id="main-content">
  <header class="page-header">
    <h1>Guides</h1>
    <p>Long-form guides to help you master content-heavy layouts.</p>
  </header>

  <section class="category" aria-labelledby="layout-guides-heading">
    <h2 id="layout-guides-heading">Layout guides</h2>

    <ul class="category__list">
      <li class="category__item">
        <article class="category-card">
          <h3 class="category-card__title">
            Semantic HTML for Content-Heavy Layouts
          </h3>
          <p class="category-card__summary">
            Learn how to structure complex pages so they are easy to navigate and maintain.
          </p>
          <a href="/guides/content-heavy-layouts" class="category-card__link">
            Read guide
          </a>
        </article>
      </li>
      <li class="category__item">
        <article class="category-card">
          <h3 class="category-card__title">
            Semantic Navigation Patterns
          </h3>
          <p class="category-card__summary">
            Explore header navs, sidebars, and in-page navigation structures.</p>
          <a href="/guides/semantic-nav" class="category-card__link">
            Read guide
          </a>
        </article>
      </li>
    </ul>
  </section>
</main>

Pattern: resource hub page

<main id="main-content">
  <header class="page-header">
    <h1>Resource library</h1>
    <p>Articles, checklists, and templates for content-heavy designs.</p>
  </header>

  <section class="resources" aria-labelledby="checklists-heading">
    <h2 id="checklists-heading">Checklists</h2>
    <ul>
      <li><a href="/resources/semantic-checklist">Semantic HTML checklist</a></li>
      <li><a href="/resources/content-review">Content review checklist</a></li>
    </ul>
  </section>

  <section class="resources" aria-labelledby="templates-heading">
    <h2 id="templates-heading">Templates</h2>
    <ul>
      <li><a href="/resources/layout-template">Content layout template</a></li>
    </ul>
  </section>
</main>

Quick check: index page structure

On a category index listing many guides, what combination is usually best?

Lesson 8 of 9
Step 9

Example layout & semantic checklist

Let’s combine the patterns into a single, content-heavy page layout, then finish with a semantic checklist you can reuse.

Example: content-heavy guide layout (condensed)

<body>
  <header class="site-header">...</header>

  <div class="layout layout--two-column">
    <main class="layout__main" id="main-content">
      <article class="guide" aria-labelledby="guide-title">
        <header class="guide__header">
          <h1 id="guide-title">
            Semantic HTML for Content-Heavy Layouts
          </h1>
          <p>A practical guide for structuring complex pages.</p>
        </header>

        <section id="intro">
          <h2>1. Introduction</h2>
          <p>Content-heavy pages require clear structure...</p>
        </section>

        <section id="outline">
          <h2>2. Designing your outline</h2>
          <h3>2.1 Start with user tasks</h3>
          <p>Identify what your readers are trying to do...</p>
        </section>

        <section id="sidebars">
          <h2>3. Handling sidebars &amp; related content</h2>
          <p>Sidebars are great for in-page navigation and references...</p>
        </section>

        <section id="faq">
          <h2>4. Frequently asked questions</h2>
          <dl>
            <div>
              <dt>Can I use this with my framework?</dt>
              <dd>Yes. Semantic HTML works with any CSS approach.</dd>
            </div>
          </dl>
        </section>

        <footer class="guide__footer">
          <p>Last updated <time datetime="2025-11-30">30 November 2025</time>.</p>
        </footer>
      </article>
    </main>

    <aside class="layout__sidebar" aria-label="On this page">
      <nav class="sidebar-nav">
        <h2 class="sidebar-nav__title">On this page</h2>
        <ol>
          <li><a href="#intro">1. Introduction</a></li>
          <li><a href="#outline">2. Designing your outline</a></li>
          <li><a href="#sidebars">3. Sidebars &amp; related content</a></li>
          <li><a href="#faq">4. Frequently asked questions</a></li>
        </ol>
      </nav>

      <aside class="related" aria-labelledby="related-heading">
        <h2 id="related-heading">Related guides</h2>
        <ul>
          <li><a href="/guides/semantic-nav">Semantic navigation patterns</a></li>
        </ul>
      </aside>
    </aside>
  </div>

  <footer class="site-footer">...</footer>
</body>

Semantic checklist for content-heavy layouts

  • Is there exactly one <main> per page containing the primary content?
  • Does the page have a single clear <h1> for its main purpose?
  • Are major in-page sections marked with <section> and appropriate headings?
  • Are self-contained pieces of content (guides, docs pages, articles) using <article>?
  • Are sidebars, notes, tips, and related links using <aside> where appropriate?
  • Is there an “On this page” or TOC navigation using anchors and section IDs?
  • Are headings in logical order (h1 → h2 → h3 without skipping levels unnecessarily)?
  • Are lists of items expressed as <ul> / <ol> instead of line breaks?
  • Are tables reserved for genuine tabular data, with <th>, scopes, and captions?
  • Does the page remain understandable and navigable with CSS disabled?

With these patterns, you can structure complex, content-heavy pages in a way that users, assistive technologies, search engines, and future developers can all work with comfortably.

Lesson 9 of 9