Semantic HTML names what a page's parts actually are
Semantic HTML is the practice of building a page with elements that describe their content's role, header, nav, main, article, section, footer, instead of generic containers styled to look the same way. A browser, a screen reader, or an AI crawler reading the raw markup can tell what each part of the page is for without inferring it from layout or visual design.
Definition
Semantic HTML is the use of markup elements whose names describe the role of the content inside them, rather than generic, meaningless containers. It gives a page a machine-readable skeleton: where the navigation is, where the main content starts, where a footer ends, independent of how the page is styled.
Why a div and a section read differently to a machine
A generic container, a plain div, carries no information about what it holds. A person looking at a styled page can tell a navigation bar from a footer at a glance, because of position, color, and layout. A system parsing the underlying document has none of that. It only has the tag names and the text.
Semantic elements close that gap. A nav element says, unambiguously, this is the site's navigation. A main element says, this is the primary content of the page, not a sidebar or an ad. An article element says, this block of content makes sense read on its own. None of that requires guessing from styling, because the tag itself carries the meaning.
What semantic HTML actually looks like
In practice it is a short, standard set of landmarks: header for the top of the page or a section, nav for a group of navigation links, main for the primary content, article for a self-contained piece of content like a blog post, section for a distinct thematic grouping, and footer for closing content and links.
Alongside the landmarks, heading hierarchy matters just as much. A page should carry one h1 stating what it is, then h2s for its major sections, then h3s nested under the relevant h2, in order, without skipping levels. That heading tree is effectively a table of contents that a machine can walk without reading a single word of prose.
Why this matters more now that AI systems read pages raw
For years, semantic HTML was mostly an accessibility and code-quality concern: it helped screen reader users and made a codebase easier to maintain. That has not changed, but a second audience has grown alongside it. AI crawlers building an understanding of a page for a chat answer or an AI Overview are, functionally, reading the same raw document a screen reader does.
Many of those crawlers fetch a page's HTML but do not execute its JavaScript, so anything that only exists after the page hydrates, and any meaning that lives purely in visual styling rather than in the markup itself, is invisible to them. A page built from unlabeled divs and an unclear heading order gives that second reader nothing reliable to work from, even if it looks perfectly organized to a person.
23.84%
of requests from Claude's crawler, and 11.50% from ChatGPT's, fetch JavaScript files, but neither executes them, so anything rendered only client-side is invisible to them.
Vercel, The rise of the AI crawler
A crawler does not see a layout. It sees the elements you chose, in the order you put them.
Common questions
Does semantic HTML directly improve rankings?
Not by itself. Search engines do not give a bonus point for using the right tag. What semantic HTML does is remove ambiguity, so the systems reading a page do not have to guess what each part means, and that clarity is what shows up in how accurately a page gets summarized or cited.
Is semantic HTML the same as accessibility markup?
They overlap heavily but are not identical. Semantic elements are also what screen readers rely on to describe a page, so most semantic HTML work improves accessibility as a side effect. But accessibility also covers things semantics alone does not, like color contrast, focus order, and alt text.
Do I need to rebuild my site to fix this?
Usually not. Swapping generic containers for the equivalent semantic element, header for header, nav for navigation, main for the primary content, is a template-level change on most sites and does not require a redesign.
Does semantic HTML replace structured data?
No, they do different jobs. Semantic HTML describes the shape of a page: which part is navigation, which is the main content, which is a footer. Structured data states specific facts, like a business name or a founder, in a machine-readable format. A well-built page uses both.
What is the minimum a small business site should have?
One header, one nav, one main landmark wrapping the primary content, a logical heading order starting at a single h1 per page, and a footer. That skeleton alone gives any parser, human assistive technology or AI crawler, a reliable map of the page.
AI-readable websites
The wider structural discipline semantic HTML is one part of.
What is an AI-readable website
The broader definition this glossary term sits inside.
What is structured data
The layer that states explicit facts on top of the semantic skeleton.
What is AI discoverability
Why structure like this is what lets a business get found by AI systems at all.
See whether your page's structure reads clearly to the systems that never see how it looks.