Semantic HTML hierarchy
Semantic HTML hierarchy is a page's outline in its code: one main heading, sections under it and subsections under those, in order.
Semantic HTML hierarchy is the outline of a page as its code describes it. There's one main heading, the H1. Under it come the section headings, the H2s, and under those the subsection headings, the H3s. Each level sits inside the one above it, with none skipped.
AI systems and search engines read that outline to understand what a page covers and where each part starts and ends. A clear outline makes it easy to find the section that answers a question and lift it out.
What a good outline looks like
Think of it as a table of contents a machine can read:
- One H1 that says what the whole page is about
- H2s for the main questions or subjects, in the order a reader needs them
- H3s only inside an H2, for the parts of that section
- Headings that describe their content, like "How long does delivery take?" in place of "More info"
It's called semantic because the tags describe meaning. An H2 means "a section starts here." Text made big and bold with styling looks like a heading to people, but in the code it's just text, so a machine doesn't know a section starts there. MDN explains semantic HTML in more depth.
An example
Kestrel Roasters' subscription page has three H1s, because its designer used H1 for anything large, and its FAQ questions are bold paragraphs with no heading tags at all. A system reading the code sees three competing main subjects and one long block of text.
Kestrel changes it to one H1, "Coffee subscriptions," with H2s for "How it works," "Prices," "Delivery" and "Questions," and each FAQ question as an H3. Now each answer sits in its own clearly marked section.
In AnswerOrbit
Page checks in Recommendations includes "A title and headings" and "The prompt in a heading," among eight checks. The Pages tab in Website and AI traffic shows What a bot reads next to What a person sees.