Clean Markup

Writing Semantic HTML5 for Accessible Document Structure

Writing Semantic HTML5 for Accessible Document Structure

Clean markup starts with choosing HTML elements for their meaning rather than their default visual appearance. Replacing generic <div> containers with semantic HTML5 landmarks makes your pages immediately more accessible to screen readers, keyboard navigation, and search engine crawlers without writing a single line of JavaScript.

When a document is built entirely out of <div class="header">, <div class="nav">, and <div class="content">, assistive technologies see a flat tree of meaningless boxes. By switching to native HTML5 sectioning elements, browsers automatically expose ARIA landmark roles to the accessibility tree.

Example

Instead of nesting generic <div> wrappers for page layout:

<!-- Avoid: Div Soup -->
<div class="header">
  <div class="nav">
    <a href="/">Home</a>
    <a href="/about">About</a>
  </div>
</div>
<div class="main-content">
  <div class="post">
    <div class="post-title">Semantic HTML5</div>
    <p>Article body...</p>
  </div>
</div>
<div class="footer">© 2019 Clean Markup</div>

Input : Unstructured HTML layout
Output : Semantic document outline with landmark roles and hierarchical headings.

Implementation 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Clean Markup — Semantic Document Structure</title>
  </head>
  <body>
    <header>
      <a href="/" aria-label="Clean Markup Home">Clean Markup</a>
      <nav aria-label="Primary Navigation">
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/posts/">Archive</a></li>
          <li><a href="/about/">About</a></li>
        </ul>
      </nav>
    </header>

    <main id="main-content">
      <article>
        <header>
          <h1>Writing Semantic HTML5 for Accessible Document Structure</h1>
          <p>
            Published on <time datetime="2019-02-06">06 Feb 2019</time>
          </p>
        </header>

        <section>
          <h2>Why Landmarks Matter</h2>
          <p>
            Screen reader users frequently navigate pages by jumping directly
            to the <code>&lt;main&gt;</code> or <code>&lt;nav&gt;</code> landmark.
          </p>
        </section>
      </article>

      <aside aria-label="Related Topics">
        <h2>Related Tags</h2>
        <ul>
          <li><a href="/tags/html/">HTML5</a></li>
          <li><a href="/tags/accessibility/">Accessibility</a></li>
        </ul>
      </aside>
    </main>

    <footer>
      <p>&copy; 2019 Clean Markup</p>
    </footer>
  </body>
</html>

Main Point: Use <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> with a strict <h1>–<h3> heading hierarchy before reaching for <div> or manual role attributes.

Credits

Photo by benjamin dada

← Home