Semantic HTML
Concept Definition
Definition
Semantic HTML uses tags that provide meaning about content structure—such as <header>, <main>, <article>, <section>, <nav>, and <footer>—helping both browsers and AI systems understand the role each piece of content plays.
Importance
Semantic HTML provides structural meaning that LLMs use to understand content hierarchy and relationships. Instead of generic <div> containers, semantic tags explicitly declare what each content block represents, making it easier for AI to parse and comprehend your site's information architecture.
Key Semantic Tags
<header>— Page or section header content<main>— Primary content of the page<article>— Self-contained, independently distributable content<section>— Thematic groupings within content<nav>— Navigation links<footer>— Footer information<aside>— Tangentially related content<figure>and<figcaption>— Images with captions
Heading Hierarchy
Proper heading structure (H1 → H2 → H3) is crucial. Use only one H1 per page for the main title, H2 for major sections, H3 for subsections within those sections. This hierarchy helps LLMs understand topic relationships and extract information in context.
Example
<article>
<header>
<h1>Model Context Marketing</h1>
</header>
<section>
<h2>Definition</h2>
<p>Content here...</p>
</section>
<section>
<h2>Why It Matters</h2>
<p>Content here...</p>
</section>
<footer>
<p>Last updated: 2025-11-04</p>
</footer>
</article>