What are header tags?

Header tags are HTML elements—<h1> through <h6>—that label the start of a section and indicate its level in the hierarchy. The H1 is typically the page’s main heading (the topic), H2 elements are the key sections beneath it, and deeper levels (H3–H6) nest sub-topics. Used properly, they improve readability, accessibility and machine understanding.

Official guidance: Google’s SEO Starter Guide recommends using descriptive headings to create a hierarchical structure that makes content easier to understand. See: Search Central — SEO Starter Guide. For accessibility, W3C’s WCAG 2.2 provides success criteria and techniques for headings. See: WCAG 2.2 Quick Ref and technique H42: Using h1–h6 to identify headings.

Why headings matter (SEO, accessibility, and parents on mobiles)

• SEO clarity: Headings outline the page topic and sections, helping search engines interpret content themes. Google advises keeping headings descriptive and organised. (Source: SEO Starter Guide)
• Accessibility: Screen reader users rely on a logical heading structure to jump through sections quickly. This aligns with WCAG success criteria on navigable content. (Source: WCAG 2.2)
• Mobile scanning: Parents skim on small screens. Clear H2/H3 ladders and short paragraphs reduce pogo-sticking and support Core Web Vitals outcomes indirectly (by improving comprehension and interaction).

Four practical principles for H1–H6

1. One clear page topic: Use one prominent, page-level <h1> that states the topic plainly (“Term Dates 2025/26”, “Admissions — Step-by-Step Guide”). HTML standards allow multiple <h1> elements in certain layouts, but for clarity and accessibility, one page-level H1 is the pragmatic choice. (Reference: WHATWG HTML — Headings and sections)
2. Use levels logically: Don’t skip levels without reason. H2 for major sections; H3 for subsections under an H2; and so on.
3. Keep headings descriptive, not stuffed: Summarise the section in natural language. Avoid keyword stuffing—Google’s guidance focuses on helpful, people-first content. (See: Creating helpful, reliable, people-first content)
4. Don’t use headings for styling: If you need a bigger font, use CSS, not an incorrect heading level. Headings communicate structure, not just size.

Examples: poor vs good heading structure

<h1>Admissions</h1><h3>General Info</h3><h5>How to apply</h5><h2>Open Days</h2>

<h1>Admissions: How to Apply for September 2026</h1><h2>Key Dates</h2><h3>Application window</h3><h3>Offer day</h3><h2>Eligibility & Criteria</h2><h2>Application Steps</h2><h3>Step 1 — Prepare documents</h3><h3>Step 2 — Submit application</h3><h3>Step 3 — What happens next</h3>

Mapping headings to common school templates

Working with a limited CMS (and still getting headings right)

• Use the editor’s heading styles: Most CMSs let you set “Heading 1/2/3”. Use these rather than bold text with larger fonts.
• Check the output: In your browser, right-click → Inspect to confirm an H2 is really <h2> in the HTML.
• Avoid all-caps or decorative emojis in headings: Screen readers will read them literally; it harms comprehension.
• Don’t duplicate the H1 as the first H2: Make H2s distinct (“Key Dates”, not “Admissions”).

Accessibility: headings that work for everyone

• One main heading: Provide a clear, page-level H1 that summarises the topic.
• Logical sequence: Don’t jump from H1 to H4 without intermediate levels unless a component is isolated and well-labelled.
• Concise and descriptive: WCAG encourages headings that describe topic or purpose. (See WCAG 2.2 Quick Ref)
• Don’t rely on colour or size alone: The semantics of H1–H6 communicate structure to assistive tech.

SEO notes: what headings do—and don’t—do

• Headings help understanding, not magic rankings: Google recommends clear, hierarchical headings to organise content for users and search. (Source: SEO Starter Guide)
• Keyword stuffing hurts readability: Write for humans; include relevant phrases naturally where they genuinely describe a section.
• Structured data ≠ headings: Schema supports rich results but doesn’t replace semantic sectioning. Use both correctly. (See Google Search Central — Structured data)

Copy-ready heading patterns (drop-in)

Admissions page skeleton

<h1>Admissions: How to Apply for September 2026</h1><p>Short intro with who this page is for and what to do next.</p><h2>Key Dates</h2><h3>Application window</h3><h3>Offer day</h3><h2>Eligibility & Criteria</h2><h2>Application Steps</h2><h3>Step 1 — Prepare documents</h3><h3>Step 2 — Submit your application</h3><h3>Step 3 — What happens next</h3><h2>Appeals</h2>

News article skeleton

<h1>Sports Day Winners Announced</h1><p>Short intro with the who/what/when in 1–2 sentences.</p><h2>Highlights</h2><h3>Records broken</h3><h3>House points</h3><h2>Quotes</h2><h2>Gallery</h2>

Common mistakes to avoid

• Using headings for layout only: e.g., making random text large by setting it to H2. Use CSS for size; use headings for structure.
• Skipping straight to H4 because it “looks right”: Adjust CSS for appearance; keep the hierarchy logical.
• Huge blocks under one heading: Break into smaller sections with meaningful H3s so parents can scan on mobiles.
• Duplicate H1 and <title> issues: The HTML <title> element (in the head) and the on-page H1 should align in topic but don’t need to be identical. Keep both descriptive. (See SEO Starter Guide)

Quality checks (quick wins)

1. Does every page have one clear H1?
2. Do H2s divide the story into logical sections?
3. Do H3s genuinely nest under the right H2?
4. Are headings concise and descriptive (no stuffing)?
5. Do headings match the content that follows?

Print-screen checklists

How to audit headings in 15 minutes

1. Open a key page (e.g., Admissions) and view the page source or use your browser’s Accessibility tree to list headings.
2. Confirm levels follow an H1 → H2 → H3 pattern without unnecessary jumps.
3. Rewrite vague headings (“Information”) into descriptive ones (“Eligibility & Criteria”).
4. Split long sections into smaller chunks with H3s for scannability.
5. Re-test with a screen reader or use your browser’s “Headings” outline to verify navigation makes sense. (WCAG reference: Quick Ref)

FAQs (Featured Snippet-ready)