Headings (H1-H6)
Structure content with a clear heading hierarchy for users and crawlers.
Headings organize a page into a logical outline. Search engines use them to understand structure and topics.
Heading rules
- Use exactly one
<h1>per page - usually the main title. - Nest headings in order:
h2underh1,h3underh2. - Do not skip levels for styling reasons - use CSS for size.
- Include keywords naturally, but write for readers first.
Why it matters
A clean heading outline improves accessibility, helps users skim, and gives search engines (and AI answer engines) clear sections to quote.
Example
<h1>Pour Over Coffee: A Beginner's Guide</h1>
<h2>What You Need</h2>
<h3>Choosing a Dripper</h3>
<h3>Choosing a Grinder</h3>
<h2>Step-by-Step Brewing</h2>
<h3>The Bloom</h3>When to use it
- A technical writer reorganises a 3 000-word guide to use one H1 and nested H2/H3 subheadings, making it easier for Google to extract passage-ranking snippets.
- An accessibility auditor flags multiple H1 tags on a single page, which confuses screen readers and dilutes the page's primary topical signal.
- A CMS developer enforces a single H1 rule via a lint step that scans rendered HTML before each deploy and fails builds with heading hierarchy violations.
More examples
Correct heading hierarchy
One H1 followed by nested H2/H3 subheadings creates a document outline that helps both users and crawlers understand the content's topical hierarchy.
<article>
<!-- One H1 — the page's single primary topic -->
<h1>Complete Guide to React State Management</h1>
<!-- H2 — major sections -->
<h2>useState and useReducer</h2>
<!-- H3 — sub-topics under the H2 -->
<h3>When to Use useState</h3>
<h3>Upgrading to useReducer</h3>
<h2>External Libraries: Redux vs Zustand</h2>
<h3>Bundle Size Comparison</h3>
</article>Heading keyword placement
Placing the primary keyword in the H1 and using question-based H2s increases the chance of appearing in People Also Ask and featured snippets.
<!-- Include the primary keyword naturally in the H1 -->
<h1>React State Management: A Complete 2024 Guide</h1>
<!-- H2s use semantic variants and question forms for PAA -->
<h2>What Is React State Management?</h2>
<h2>useState vs useReducer: Which Should You Use?</h2>
<h2>Best State Management Libraries for Large Apps</h2>Lint for multiple H1 tags
This shell one-liner scans all HTML files and flags any page with more than one H1, catching structural heading errors before they reach production.
# Check every HTML file for multiple H1 tags
find /var/www/html -name '*.html' | while read f; do
count=$(grep -oi '<h1' "$f" | wc -l)
if [ "$count" -gt 1 ]; then
echo "MULTIPLE H1 ($count): $f"
fi
done
Discussion