Heading hierarchy is the outline of a page built from the HTML elements <h1> to <h6>. <h1> is the highest level, <h6> the lowest. The outline helps readers, screen reader users and search engines see how content is organized.
What does the hierarchy mean for SEO?
MDN and the W3C advise nesting levels in order and not skipping a level when going deeper, because screen reader users navigate by headings. Skipping is fine when closing a subsection, for example going from <h4> back to <h2>. Size and appearance belong to CSS, not to the choice of level.
Google’s SEO Starter Guide says semantic heading order helps screen readers, but from a Google Search perspective it does not matter if headings are out of order. Headings are one source for title links, so Google recommends making clear which text is the main title, for example in the first visible <h1>.
MDN lists several <h1> elements as allowed but recommends one that describes the page. SEO guides differ in how strictly they recommend this.
Example
<h1>Beetles</h1>
<h2>Etymology</h2>
<h2>Evolution</h2>
<h3>Late Paleozoic</h3>
<h3>Jurassic</h3>
<h2>External Morphology</h2>
Common mistakes
Choosing a level for its font size, such as <h4> instead of <h2>, or using bold text instead of a heading, changes the structure that assistive tools read.
FAQ
How many h1 elements should a page have? Several are allowed, one is recommended.
Sources
- HTML heading elements – MDNdeveloper.mozilla.org
- Headings – W3C Web Accessibility Initiativew3.org
- SEO Starter Guide – Google Search Centraldevelopers.google.com
- Influence your title links – Google Search Centraldevelopers.google.com
Last updated: