Semantic Markup for AEO

Semantic HTML helps AI systems understand the structure and meaning of your content beyond just the text. This guide covers how to implement semantic markup effectively.

What is Semantic HTML?

Semantic HTML uses elements that convey meaning about the content they contain, rather than just how it should look.

<!-- Non-semantic (AI has to guess) -->
<div class="article">
  <div class="title">Page Title</div>
  <div class="content">Content here...</div>
</div>

<!-- Semantic (AI understands structure) -->
<article>
  <header>
    <h1>Page Title</h1>
  </header>
  <p>Content here...</p>
</article>

Key Semantic Elements

Element	Purpose	AI Understanding
`<article>`	Self-contained content	Main content block
`<section>`	Thematic grouping	Topic division
`<header>`	Introductory content	Page/section intro
`<footer>`	Footer information	Metadata, credits
`<nav>`	Navigation links	Not main content
`<aside>`	Tangentially related	Secondary content
`<main>`	Main content area	Primary focus
`<figure>`	Self-contained media	Illustration content

Implementation Pattern

<body>
  <header>
    <nav><!-- Site navigation --></nav>
  </header>
  
  <main>
    <article>
      <header>
        <h1>Article Title</h1>
        <p class="lead">Summary...</p>
        <time datetime="2026-01-05">January 5, 2026</time>
      </header>
      
      <section id="introduction">
        <h2>Introduction</h2>
        <p>Content...</p>
      </section>
      
      <section id="main-content">
        <h2>Main Topic</h2>
        <p>Content...</p>
        
        <figure>
          <img src="diagram.png" alt="Descriptive alt text">
          <figcaption>Figure 1: Description of diagram</figcaption>
        </figure>
      </section>
      
      <aside>
        <h3>Related Resources</h3>
        <!-- Related links -->
      </aside>
      
      <footer>
        <p>Author: Jane Smith</p>
      </footer>
    </article>
  </main>
  
  <footer>
    <!-- Site footer -->
  </footer>
</body>

Best Practices

Use <article> for main content — Wraps self-contained content
Use <section> for divisions — Group related content with headings
Add id attributes — Enable deep linking and navigation
Use <time> for dates — Machine-readable dates with datetime attribute
Add alt text to images — Describe images for AI understanding

Next Steps

Schema.org Guide

Content Structure