Back to “Technical SEO basics”
Technical SEO basics4 min read

Semantic HTML5

article, section, nav, main: why semantic HTML structure helps AIs isolate useful content from noise (menus, footer, ads).

Semantic HTML5 means choosing tags that describe the nature of the content (<article>, <nav>, <main>) rather than generic tags (<div>, <span>) that carry no meaning. This difference directly helps engines and AIs isolate useful content from the rest of the page.

Why semantics matter

A <div> says nothing about its content: it could just as easily contain an article's main text, an ad block, or a navigation menu. A semantic tag, on the other hand, carries explicit information about the role of the block it wraps. For a machine that has to decide which part of a page is the main content worth indexing or citing, that information is directly usable, without having to guess from uncertain heuristics (position, CSS class, amount of text).

Before HTML5, developers already used naming conventions to give their tags meaning (<div class="header">, <div class="nav">), but these CSS classes carry no standardized semantic value: an engine can't be certain that a class named "header" actually corresponds to a header, since any developer can name their classes however they like. Semantic HTML5 tags, on the other hand, form a shared, unambiguous vocabulary, interpreted the same way by every system that reads HTML.

The key semantic tags

<body>
  <header>
    <nav><!-- main menu --></nav>
  </header>

  <main>
    <article>
      <h1>Article title</h1>
      <section>
        <h2>First part</h2>
        <p>...</p>
      </section>
      <section>
        <h2>Second part</h2>
        <p>...</p>
      </section>
    </article>
    <aside><!-- related, non-essential content --></aside>
  </main>

  <footer><!-- footer links, legal notices --></footer>
</body>
  • <header>: page or section header (not necessarily the visual top of the page).
  • <nav>: block of navigation links.
  • <main>: the page's single main content — only one <main> tag per page.
  • <article>: self-contained content that would make sense even isolated from the rest of the page (a blog post, a product sheet).
  • <section>: a thematic grouping within an article or page — use it only when the section has its own logical heading (generally a heading tag), not as a mere visual split.
  • <aside>: related but non-essential content (associated links, an ad block).
  • <footer>: page or section footer.

Isolating useful content from the noise

A web page rarely contains only main content: navigation menu, cookie banner, ad blocks, and a footer with legal links and social icons often make up a large share of the HTML. Without semantic structuring, a machine has to guess how much of the extracted text is actually relevant. Correct markup with <nav>, <aside>, and <footer> clearly separated from <main> and <article> reduces this noise and concentrates attention on the content that actually matters — an issue directly tied to how an engine reads your page.

On some sites, navigation content and peripheral blocks make up a larger share of the HTML than the main content itself, particularly on short pages. In that case, precise semantic structuring becomes even more decisive so a machine doesn't overweight that noise relative to the text that actually matters.

Common mistakes

  • Coding everything in <div> with CSS classes, with no semantic tags at all — still common on sites generated by some visual builders.
  • Using multiple <main> tags on the same page.
  • Putting the main editorial content inside an <aside> by structural mistake.
  • Using <section> as a plain styling container with no real thematic grouping.
  • Nesting an <article> inside a <nav> or an <aside>, which contradicts the very logic of those tags.

A benefit beyond SEO

Semantic HTML5 also improves accessibility: screen readers rely on these same tags to let a visually impaired user jump directly to the main content, without having to navigate the menu on every page. The same structuring effort therefore serves accessibility, classic SEO, and GEO simultaneously.

Migrating an existing site to a semantic structure

Restructuring a site already built with generic <div>s doesn't necessarily require a full rebuild. In most cases, it means replacing existing wrapper tags with their semantic equivalent (<div class="main-content"> becomes <main>, <div class="site-footer"> becomes <footer>) without touching the CSS that already targets these elements by class. This gradual migration, template by template, improves the structure without risking breaking the existing visual layout — a realistic undertaking even on a site already in production.

To go further on what this structuring enables once the text is extracted, the lesson on chunking explains how an LLM then splits this content into usable blocks, and the lesson on Schema.org structured data shows how to go even further in the clarity of the information conveyed.