2026-08-03 · Jack Stovell
Semantic HTML for AI readability: the markup that makes you legible
Semantic HTML matters to AI readability for one blunt reason: most AI crawlers fetch your page's raw HTML and never execute JavaScript, so the only structure they see is the structure in your markup. Real headings, paragraphs, lists and links in the source make a page legible to machines; content that only appears after a framework renders it is effectively invisible to GPTBot, ClaudeBot, PerplexityBot and their peers. Googlebot does render JavaScript, which is why a site can be perfectly indexed by Google and still unreadable to AI.
Why does semantic HTML matter to AI crawlers?
Because these systems read by extraction, not by rendering. A crawler or answer-time fetcher pulls your HTML and strips it to text and structure: headings tell it what each section claims to be, paragraphs give it quotable passages, lists give it clean facts. A page built as nested anonymous divs, with all meaning carried by CSS classes, still delivers its text but makes every extraction step harder — and a page whose text arrives via JavaScript delivers nothing at all. That second failure mode is common enough to have its own guide: JS shells and soft 404s.
None of this means abandoning your framework. Server-side rendering and static generation both produce complete HTML at fetch time, so a React or Vue site can be perfectly AI-readable — the question is never which framework you use, only what the server actually sends.
Which tags carry the most signal?
The short list, in rough order of leverage:
- The title tag and the meta description: the two lines most likely to represent the page in a search index, which is where retrieval starts.
- One h1 stating what the page is, and h2s for its sections — the heading hierarchy is the skeleton extractors navigate by.
- p for prose and ul for facts: self-contained paragraphs and clean lists are what get lifted into answers.
- main and article versus header, nav and footer: these separate content from chrome, so a machine knows which text is the page and which is furniture.
- A canonical link element giving the page one stable URL, so every mention consolidates to the same address.
- Descriptive link text — "read the case study" rather than "click here" — because links are read as claims about their targets.
What does an AI-readable page look like?
Here is a complete minimal about page that reads correctly with no CSS and no JavaScript, which is the whole test:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sam Wright — Freelance Product Designer</title>
<meta name="description" content="Freelance product designer in Bristol, UK, working with early-stage startups on web and mobile products.">
<link rel="canonical" href="https://samwright.example/about">
</head>
<body>
<header>
<a href="https://samwright.example/">Sam Wright</a>
</header>
<main>
<article>
<h1>About Sam Wright</h1>
<p>I am a freelance product designer in Bristol, UK. I work with
early-stage startups on web and mobile products, from first research
through to shipped interfaces.</p>
<h2>What I do</h2>
<ul>
<li>Product design, from user research to high-fidelity UI</li>
<li>Design systems and component libraries</li>
<li>UX audits of existing products</li>
</ul>
<h2>Contact</h2>
<p>Email <a href="mailto:[email protected]">[email protected]</a>
or check current availability on the services page.</p>
</article>
</main>
<footer>
<p>Last updated 3 August 2026</p>
</footer>
</body>
</html>Nothing in it needs a framework, and everything in it survives being fetched by the simplest crawler in existence. Layer identity markup on top — a Person JSON-LD block — and the page states who you are as well as what you say.
How do you check what a crawler sees?
View the source, not the page. Use your browser's view-source, or fetch the URL with curl from a terminal, and read what actually comes back: if your name, your h1 and your body text are present in that raw response, machines can read them. Turning JavaScript off in your browser and reloading is the same test in friendlier clothing. For the step-by-step manual version, see check if AI can read your website; for the automated version, our free checker at /tools/ai-visibility fetches your site the way AI crawlers do and reports JavaScript-shell problems alongside robots.txt stance and identity markup.
What this won't do: semantic HTML makes you readable, not chosen. It removes the most common technical reason for being invisible to AI systems; retrieval, ranking and model behaviour still decide who gets cited.
Check your AI visibility — free
Related guides
- JS shells and soft 404s: how your site lies to crawlers
- Person schema markup: a copy-paste JSON-LD example
- How to check whether AI can actually read your website