Semantic HTML5 Layout

Before HTML5, every page was built from anonymous <div> soup: <div class="header">, <div class="sidebar">. HTML5 introduced semantic elements — tags whose names literally describe the content they hold. This chapter is about writing markup that humans, browsers, search engines, and screen readers all understand.

The core layout elements

<body>
  <header>
    <nav aria-label="Main"> ... menu links ... </nav>
  </header>

  <main>
    <article>
      <h1>Understanding fermentation</h1>
      <section>
        <h2>What is proofing?</h2>
        <p> ... </p>
      </section>
      <section>
        <h2>Signs your dough is ready</h2>
        <p> ... </p>
      </section>
    </article>

    <aside>
      <h3>Related reading</h3>
      <ul> ... </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 The Scriptly</p>
  </footer>
</body>

What each element means

section vs. article vs. div

• <article>: could be syndicated elsewhere and still make sense. A tutorial chapter? Yes.
• <section>: a themed chunk identified by a heading. Use when content belongs to the surrounding document.
• <div>: no semantic meaning — a styling/positioning hook only. When in doubt, ask: "would a heading make sense here?" If no → div.

Document outline & screen reader navigation

Assistive technology lets users jump between landmarks: skip straight to main, then to nav, then by headings. Two accessibility essentials:

<!-- 1. Skip link: first focusable element on the page -->
<a class="skip-link" href="#main">Skip to main content</a>
...
<main id="main"> ... </main>

<!-- 2. Distinguish multiple navs -->
<nav aria-label="Primary">...</nav>
<nav aria-label="Footer">...</nav>

Why search engines love semantics

• Crawlers infer structure: one <main>, headings as an outline, <article> as indexable units.
• Google can extract sitelinks from your <nav> and answer boxes from well-outlined content.
• Schema markup (see HTML & SEO) maps directly onto these elements.

Real-life use case

The tutorial page you are reading follows this pattern exactly: <header> with site nav, a left <nav> sidebar listing chapters, <main> wrapping this <article>, an <aside> with related tutorials, and a <footer>. Every landmark is keyboard-reachable and announced correctly.

Common mistakes

• Duplicate <main> — invalid; one per document.
• Heading inside <header> used as the page's only <h1> while <main> holds the real title — keep the primary h1 in main.
• Everything as <article> — paragraphs, lists, and widgets are not articles.
• <section> without a heading — if there is no heading, it is probably a div.
• Multiple <footer>s with identical content — footers inside articles should hold article metadata (author, date), not site-wide links.

Best practices

• Build the skeleton semantically first, style later. CSS targets elements and classes equally.
• Start every page: skip link → header/nav → main → footer.
• Give every section an <h2>; keep heading levels sequential.
• Older browsers (IE) ignore unknown elements — harmless in 2026; all modern browsers support them natively.

What's next?

Add rich media with Audio & Video, or write special characters correctly with HTML Entities.