Heading Hierarchy (H1-H6)
The organizational structure of a web page's headings.
Detailed Explanation
A correct hierarchy (one H1, followed by H2s, then H3s, etc.) is vital for accessibility and SEO. It acts as the 'table of contents' for the page, helping both users and search engines understand the information architecture. Skipping levels (e.g., jumping from H2 to H4) is a common accessibility error that confuses screen reader users.
Quick Summary
Heading tags (`<h1>` through `<h6>`) define the document outline. Screen readers use them to let users 'jump' through sections; search engines use them to understand structure and topical relevance. One `<h1>` per page, then `<h2>` for sections, `<h3>` for subsections, never skip levels.
Key Takeaways
- One `<h1>` per page, it's the page's primary title.
- Don't skip levels: H2 → H4 confuses screen readers and crawlers.
- Headings should describe their section's content (think table of contents).
- Use CSS for visual styling, don't pick heading level based on font size.
- Screen reader users navigate by headings, bad hierarchy = bad UX.
When to use it
- Long articles with multiple sections, H2 per section, H3 per subsection.
- Documentation sites with deeply nested topics.
- Glossary pages: H1 for the term, H2 for sections like 'Definition', 'Examples'.
- Landing pages: H1 for the headline, H2 for feature sections.
Common Mistakes
- Multiple H1s on a single page (HTML5 technically allows it, but most SEOs avoid it).
- Using H1 for the site logo instead of the page title.
- Skipping heading levels for visual reasons, use CSS instead.
- Styling regular `<div>` like a heading instead of using semantic `<h2>`.
- All headings the same level (h2, h2, h2) with no nesting, flat structure loses meaning.
Heading Hierarchy (H1-H6), Frequently Asked
Can I have multiple H1s on one page?
HTML5 allows it within `<section>` elements, but for SEO and accessibility consistency, one H1 per page is still the safest practice.
Should the page title and H1 match?
They can be similar but don't have to be identical. The `<title>` is for SERPs/browser tabs; H1 is for on-page hierarchy.
Is heading hierarchy a ranking factor?
Indirectly, it helps Google parse structure, and bad hierarchy hurts dwell time and accessibility scores.