Semantic HTML uses meaningful tags that describe what content *is* rather than just how it looks, which helps AI systems understand page structure the way humans do. When you write proper semantic markup, AI tools can extract relevant information more accurately, making your content more discoverable and useful in conversations with intelligent assistants.
HTML is the code that structures web pages. "Semantic" HTML means using code tags that accurately describe what content they contain—not just how it looks visually.
Here's the difference: A designer might use a big, bold font to make something look like a heading. That's visual. But if the code doesn't say "this is a heading," a screen reader won't know—it'll just read it as regular text. Semantic HTML says "this is a heading" in the code itself, so both visual readers and screen readers understand its importance.
Why this matters for AI: AI models are trained on real web content. When that content has proper semantic HTML, the AI can understand the page structure better. A data table marked with proper table tags (<table>, <th>, <td>) is machine-readable. The same table built with <div> tags (a generic container) is just a visual mess to AI.
Think of it like filing: proper semantic HTML is like clearly labeled folders in a filing cabinet. Generic HTML is like throwing everything in a pile. AI (and screen readers) can search labeled folders; they can't organize piles.
Common semantic HTML elements:
<h1>, <h2> — Headings (not just big text)<nav> — Navigation menus<article>, <section> — Content blocks<button> — Interactive buttons (not divs styled as buttons)<label> — Form field labels linked to inputs<alt> — Descriptions for imagesWhen a page uses these tags properly, screen readers know where navigation ends and content begins. AI tools can extract the main article without clutter. Accessibility checkers (which use AI) can instantly spot missing labels or broken structure.
The practical impact: A website built with semantic HTML is:
Poor semantic HTML forces screen reader users to listen to every word of messy navigation before reaching content. It forces AI to guess at structure. It breaks future accessibility features.
Importantly: Semantic HTML isn't primarily for AI. It's for humans using assistive technology. But proper structure benefits everyone—including AI tools designed to help with accessibility.
Try this: Use browser developer tools (right-click, select "Inspect") on a website you use regularly. Look for headings, navigation sections, buttons. Are they marked with semantic tags or generic divs? Notice how cleaner structure makes the page more understandable even for a sighted person.
Peri can explain this concept, give practical examples, help you decide whether it applies to your situation, or recommend a journey if appropriate.
Explore related journeys or tell Peri what you're working through.