Heading Structure H1–H6: Semantic Nesting, Single H1 & Readability
Heading structure is the page's "outline skeleton." Clear, ordered H1–H6 helps search engines understand content hierarchy, lets readers quickly scan, and enables screen reader users to navigate efficiently. It seems like a small detail, yet serves SEO, readability, and accessibility simultaneously—and the correct approach is simple.
Single H1 Principle#
H1 is the page's main heading, answering "what is this page about." It's recommended to use only one H1 per page: while HTML5 technically allows multiple H1s and Google claims to handle them, a single H1 expresses most clearly and is most friendly to readers and assistive technologies. Use H2–H6 for the remaining hierarchy.
H2–H6 Semantic Nesting#
Headings should be nested level by level, without skipping: H1 is followed by H2, H2 by H3—don't jump from H2 directly to H4. When you need smaller text, use CSS for styling rather than downgrading heading tags.
<h1>Heading Structure H1–H6</h1>
<h2>Single H1 Principle</h2>
<h2>H2–H6 Semantic Nesting</h2>
<h3>Don't Skip Levels</h3>
<h3>Use CSS for Font Size</h3>
<h2>Accessibility Relationship</h2>
Such structure generates a clear "document outline," helping search engines understand the hierarchy of each section.
Headings, Outline & Readability#
Good headings themselves form an outline. When writing, list headings first then fill in content to ensure logical coherence. Each heading should:
- Be self-informative: write "How to Add Canonical" rather than "Method 2";
- Facilitate scanning: users can quickly find what they want via headings;
- Match content: the heading promises something, the content delivers it.
Keywords in Headings#
Headings are topic signals, so naturally including relevant keywords is helpful, but prioritize readability. Keywords should integrate naturally, not be forced. Keyword-stuffed headings harm user experience and may be flagged as low-quality. Put readers first—keywords are the natural result.
Accessibility Relationship#
Common Mistakes#
| Mistake | Correction |
|---|---|
| Multiple H1s or no H1 | One clear H1 per page |
| Skipping levels (H2→H4) | Nest sequentially |
| Using H tags purely for font size | Use H for structure, CSS for size |
| Using bold text as fake headings | Use semantic heading tags |
| Keyword stuffing in headings | Readability first, natural keywords |
Frequently Asked Questions#
Can a page have multiple H1 tags?
From an SEO and readability perspective, it's strongly recommended to use only one H1 per page as the main heading. While HTML5 technically allows multiple H1s and Google claims to handle them, a single H1 most clearly expresses "what this page is about" and is most friendly to readers and assistive technologies. Use H2–H6 for the remaining hierarchy.
Can heading levels be skipped (e.g., H2 directly to H4)?
Skipping levels is not recommended. Headings should be nested sequentially in H1→H2→H3 order—H2 should be followed by H3, not jump directly to H4. Skipping disrupts the document outline logic, makes it difficult for screen reader users to understand the structure, and weakens search engines' parsing of content hierarchy. Use CSS to control font size when smaller text is needed, rather than using lower-level heading tags.
Must headings contain keywords?
Headings are important signals for content topic, so naturally including relevant keywords is helpful, but don't sacrifice readability for keyword stuffing. Good headings serve readers first: accurately summarize that section's content and facilitate scanning. Keywords should be the result of natural integration, not forced inclusion. Keyword-stuffed headings are neither user-friendly nor may be flagged as low-quality.
How does heading structure relate to accessibility?
It's critically important. Screen reader users often navigate and jump through pages using headings, so clear, ordered, non-skipping heading levels enable them to efficiently understand page structure. This aligns with search engines' needs for parsing content—accessible structures are typically SEO-friendly structures. Using semantic H1–H6 rather than bolded plain text to express headings is a basic accessibility requirement.