Semantic HTML

Semantic HTML uses HTML elements that clearly describe the meaning, purpose, and structure of content. Unlike generic divs and spans, semantic elements tell browsers, search engines, and AI systems what the content represents.

Key Semantic Elements:

Document Structure

• : Page or section header
• : Navigation links
• : Primary content
• : Page or section footer
• : Sidebar/related content

Content Sections

• : Self-contained content
• : Thematic grouping
• /: Images with captions

Text Semantics

• -: Heading hierarchy
• : Paragraphs
• : Quotations
• : Citation source
• : Code snippets
• : Dates and times
• : Contact information

Lists

• //: Lists
• //: Definition lists

Why Semantic HTML Matters for AI:

• Provides context beyond visible text
• Enables accurate content extraction
• Improves accessibility (used by AI)
• Supports structured data extraction
• Differentiates content types

Example:

<article>
  <header>
    <h1>Article Title</h1>
    <time datetime="2024-01-15">Jan 15, 2024</time>
  </header>
  <p>Content...</p>
</article>

Semantic HTML is a foundational GEO practice that improves how AI systems understand and extract your content.