Semantic HTML5 landmarks

What this check looks for

This check looks for seven semantic landmark tags (main, article, nav, header, footer, section, aside) and whether an h1 is present. Good structure — a <main> element, an h1, and at least three distinct landmarks — passes. Partial structure (at least two landmarks, or an h1 plus one landmark) warns, naming what's missing, usually <main> and/or the h1. Little to no semantic structure fails.

Why it matters

<div class="main-content"> and <main> look identical to a person looking at the rendered page, but they're completely different signals to a machine parser: the semantic tag unambiguously says "this is the primary content," while a div with a CSS class name is just an arbitrary label with no standardized meaning. AI systems (and accessibility tools, which rely on the exact same landmarks) use these tags to build a structural map of the page before trying to understand its content — without them, an extractor has to guess at page structure using heuristics that are far less reliable than reading an explicit <main> or <article> tag. This is one of the most direct, mechanical improvements available for AI readability, since it's often a matter of renaming existing wrapper elements rather than restructuring content.

How to fix it

Replace generic div wrappers with their semantic HTML5 equivalents:

<!-- Generic divs carry no structural meaning to a parser -->
<div class="nav">...</div>
<div class="content"><div class="title">Wireless Headphones</div></div>
<div class="footer">...</div>

<!-- Fixed: semantic landmarks + a real h1 -->
<nav>...</nav>
<main>
  <article>
    <h1>Wireless Headphones</h1>
  </article>
</main>
<footer>...</footer>