In this article 10 sections
- Why semantic HTML is critical for LLMs
- The three layers that matter
- Real impact: semantic vs. non-semantic
- Mistakes I see all the time in ecommerce
- How to audit your semantic HTML
- The “no CSS” test
- Landmarks and regions
- ARIA: when HTML falls short
- The link to WCAG and the European Accessibility Act
- Audit tools
Why semantic HTML is critical for LLMs
Semantic HTML has always mattered for accessibility. What has changed is that AI agents (ChatGPT with web search, Claude, Perplexity) now rely on that same structure to understand what each element on your page does.
The VisualWebArena paper from ACL 2024 showed that multimodal agents have significant limitations when processing visual interfaces. Many of them work in “reader mode”: just text and HTML, with no CSS or JavaScript. If your HTML makes no sense without styles, agents don’t understand your page.
This isn’t theory. In international ecommerce I’ve seen sites with correct semantic HTML get better representation in LLM answers than competitors with better content but worse structure.
The three layers that matter
To understand why semantics are critical, you have to think about how your page gets processed:
- Layout tree: what gets painted on screen
- Accessibility tree: roles, accessible names and relationships between elements
- Content extraction: the structured summary that feeds the model
AI agents combine all three. If your “Add to cart” button is a <div onclick="..."> instead of a <button>, the accessibility tree doesn’t recognize it as interactive, and the agent doesn’t know it can click there.
Real impact: semantic vs. non-semantic
| Element | Non-semantic HTML | Semantic HTML | Impact on AI |
|---|---|---|---|
| Button | <div onclick=""> | <button> | Agent doesn’t detect interactivity |
| List | <div><div>...</div></div> | <ul><li>...</li></ul> | Loses the relationship between items |
| Navigation | <div class="nav"> | <nav> | Doesn’t identify the main menu |
| Content | <div class="content"> | <main> | Doesn’t tell the main content apart |
| Heading | <div class="title"> | <h1> | Loses the information hierarchy |
AI agents process the DOM, not the CSS. A <div> with class="button" is a <div>, not a button.
Mistakes I see all the time in ecommerce
Headings out of order
<!-- Wrong -->
<h1>Store</h1>
<h3>Shoes category</h3> <!-- Where's the H2? -->
<h2>Featured product</h2>
<!-- Right -->
<h1>Store</h1>
<h2>Shoes category</h2>
<h3>Featured product</h3>Heading order isn’t cosmetic, it’s structural. Agents use the H1→H2→H3 hierarchy to understand which sections contain what. Skipping levels breaks that understanding.
Lists that aren’t lists
<!-- Wrong -->
<div class="features">
<div>Free shipping</div>
<div>30-day returns</div>
<div>2-year warranty</div>
</div>
<!-- Right -->
<ul class="features">
<li>Free shipping</li>
<li>30-day returns</li>
<li>2-year warranty</li>
</ul>A screen reader announces “list, 3 items” before reading the content. An agent understands they are related items at the same level. A div full of divs is… nothing.
Images without context
<!-- Wrong -->
<img src="nike-shoe.webp">
<!-- OK -->
<img src="nike-shoe.webp" alt="Nike shoe">
<!-- Right -->
<img src="nike-shoe.webp"
alt="Nike Air Max 90 in white, right side view">Alt text isn’t just for image SEO. It’s the only way an AI agent can “see” your product without processing the image. In ecommerce, a good alt can be the difference between the agent recommending your product or not.
How to audit your semantic HTML
The fastest way: open DevTools (F12), go to the “Accessibility” tab and check the accessibility tree. You should see:
- Headings in hierarchical order
- Buttons identified as
role="button" - Links identified as
role="link" - Lists with their items
- Images with accessible names
I also recommend:
- Lighthouse: automated accessibility audit
- axe DevTools: a more detailed extension for specific issues
- Wave: a visualization of the semantic structure
The “no CSS” test
Test your page with CSS turned off. In Firefox: View menu → Page Style → No Style. Chrome has no built-in toggle, but pasting document.querySelectorAll('style, link[rel="stylesheet"]').forEach(el => el.remove()) into the console does the job.
If your page is still navigable and understandable, your semantic HTML is fine. If it’s an unreadable mess, that’s exactly what AI agents are seeing.
Landmarks and regions
HTML5 introduced semantic elements that define regions of the page:
<header> <!-- Site header -->
<nav> <!-- Main navigation -->
<main> <!-- Main content -->
<aside> <!-- Secondary content -->
<footer> <!-- Page footer -->
<article> <!-- Self-contained content -->
<section> <!-- Thematic section -->Agents use these landmarks to understand your page’s architecture. If all your content sits in <div>s, the agent can’t tell the main content from the navigation or the footer.
ARIA: when HTML falls short
Sometimes semantic HTML doesn’t cover a specific case. That’s what ARIA is for:
<!-- Custom tabs -->
<div role="tablist">
<button role="tab" aria-selected="true">Description</button>
<button role="tab" aria-selected="false">Specifications</button>
</div>
<!-- Cart with a counter -->
<button aria-label="Shopping cart, 3 items">
<svg>...</svg>
<span>3</span>
</button>The first rule of ARIA: if you can use native semantic HTML, use it. ARIA is for when there’s no alternative.
The link to WCAG and the European Accessibility Act
The European Accessibility Act has required WCAG 2.1 level AA compliance since 2025. But beyond legal compliance, there’s a direct SEO benefit: an accessible site is easier to crawl and index.
Google confirms it in its SEO starter guide: semantic structure helps Googlebot understand the content. The same goes for the RAG (Retrieval Augmented Generation) systems LLMs use to pull data from your site.
Audit tools
| Tool | Type | Main use |
|---|---|---|
| Lighthouse | Built into Chrome | Quick automated audit |
| axe DevTools | Extension | Specific, detailed issues |
| Wave | Extension/Web | Structure visualization |
| W3C HTML Validator | Web | Syntax validation |
| Pa11y | CLI | CI/CD integration |
The time you invest in semantic HTML pays off on three fronts: accessibility, traditional SEO and now visibility in LLMs. There’s no excuse for not getting it right.