Core principles (non-negotiables)

1. One page-level H1 that states the outcome/topic. HTML permits nuance, but the clearest, most accessible convention for school sites is a single H1 per page. (Spec context: WHATWG HTML “Headings and sections”.)
2. Descriptive, task-oriented H2s. H2s divide the story into parent tasks or questions (e.g., Key Dates, Eligibility, Application Steps).
3. Predictable ladder. Nest H3/H4 under the right parent; avoid level jumps (H1→H4) that confuse assistive tech.
4. Semantics over style. Use CSS for size/colour. Headings communicate document structure for users and search. (Google’s SEO Starter Guide; Helpful content guidance.)
5. Keep headings concise and meaningful. Avoid stuffing—write headings that truly summarise the section that follows.

References: Google SEO Starter Guide • Google Helpful content • WHATWG Headings & sections.

Template patterns (copy-ready & scalable)

Use these patterns as your “source of truth” in a design system / CMS pattern library. They’re distinct from our beginner and strategy pieces by focusing on repeatable implementation.

<h1>Admissions: How to Apply for September 2026</h1><h2 id="key-dates">Key Dates</h2><h2 id="eligibility">Eligibility & Oversubscription Criteria</h2><h2 id="steps">Application Steps</h2> <h3 id="step-1">Step 1 — Prepare documents</h3> <h3 id="step-2">Step 2 — Submit your application</h3> <h3 id="step-3">Step 3 — What happens next</h3><h2 id="appeals">Appeals</h2>

<h1>Term Dates 2025/26</h1><h2>Autumn Term</h2><h2>Spring Term</h2><h2>Summer Term</h2><h2>INSET & Holidays</h2>

<h1>School Policies & Documents</h1><h2>Safeguarding</h2><h2>Behaviour</h2><h2>Attendance</h2><h2>SEND</h2>

<h1>SEND Information Report</h1><h2>Our Provision</h2><h2>How to Access Support</h2><h2>Complaints & Feedback</h2><h2>External Services</h2>

<h1>[Article title]</h1><h2>Highlights</h2><h2>Quotes</h2><h2>Gallery</h2>

<h1>Clubs & Wraparound Care</h1><h2>Timetable</h2><h2>How to Book</h2><h2>Costs & Help</h2>

Accessibility alignment (WCAG) & ARIA caveats

• Programmatic headings: Use real <h1>–<h6>. Screen reader users navigate by headings; headings must reflect the visual/structural outline. (WCAG Quick Ref; Technique H42.)
• Don’t “fake” headings with ARIA alone. role="heading" with aria-level is for edge cases—prefer semantic HTML headings wherever possible. (WAI-ARIA Authoring Practices.)
• Concise labels: Headings should “describe topic or purpose”. Don’t rely on colour/position alone to convey structure. (WCAG 2.2.)

References: W3C WCAG 2.2 Quick Ref • W3C Technique H42 • WAI-ARIA APG Authoring Practices.

Performance & headings (CLS/INP guardrails)

Headings are lightweight, but the components around them (banners, anchors, sticky nav) can affect stability and responsiveness.

• Prevent CLS: reserve space for sticky headers/consent banners so anchor links don’t jump unexpectedly; size images/iframes within sections.
• Improve INP: avoid JavaScript-driven accordions for essential content where headings + native <details>/<summary> work.
• Anchor offset: if sticky headers overlap anchored headings, apply scroll-margin-top to headings via CSS.

/* Prevent anchored H2 from sitting under sticky header */h2[id]{scroll-margin-top: 6rem;}

References: web.dev on CLS and INP.

Component libraries & CMS block patterns

Lock best practices into components so editors “can’t break” structure:

1. Heading block: exposes only allowed levels per template (e.g., Home page blocks forbid H1 duplication).
2. Section block: renders an H2 + optional introductory paragraph + children slots with defaults for H3s.
3. Contents box: auto-generates from H2 IDs; editors can reorder via drag & drop.
4. Policy index block: lists categories (H2) and policy items beneath with clear labels and dates—no “miscellaneous”.

Anchors, contents boxes & linkable sections

Good headings deserve good linking. Make sections sharable and scannable:

• Add stable id attributes to H2/H3 (no auto-regenerating slugs on minor edits).
• Use an “On this page” contents box for long pages; avoid nesting deeper than H3 for mobile sanity.
• Provide visible anchor hints on focus/hover for keyboard users.

<nav aria-label="On this page"> <h2>On this page</h2> <ul> <li><a href="#key-dates">Key Dates</a></li> <li><a href="#eligibility">Eligibility</a></li> <li><a href="#steps">Application Steps</a></li> </ul></nav>

Internationalisation & multi-site consistency (MAT)

• Pattern inheritance: define a central heading policy (H1 title tokens, approved H2 lists per template) and push to each school site.
• Language/locale: ensure headings remain meaningful when translated; avoid idioms or wordplay in H1.
• URL + heading parity: keep H1 aligned to the canonical page purpose; avoid “one template, many meanings”.

Migration playbook & regression QA

1. Inventory: export URLs + titles + current H1–H3 hierarchy per page (crawler or manual) before a theme/CMS change.
2. Map patterns: attach each URL to a target template pattern (above) and note required H2s/H3s.
3. Redirects & parity: ensure the new page’s H1 topic matches user expectations from the old URL.
4. Regress headings: after launch, crawl and diff: missing H1s, duplicate H1s, level jumps, generic H2 labels.

Automated QA (outline checks you can run regularly)

You don’t need complex tooling to catch most heading issues—basic automated checks go far:

• Exactly one page-level H1 present on canonical pages.
• First child levels progress predictably (H1→H2→H3).
• Flag vague H2s (e.g., “Information”, “More details”).
• Ensure H1 topic aligns with <title> and breadcrumb labels.

For accessibility testing, combine automated checks with manual keyboard/reader tests. WCAG stresses outcomes, not just code patterns.

Print-screen checklists (no downloads)

Copy patterns (drop-in examples)

Policies index (scannable)

<h1>School Policies & Documents</h1><h2>Safeguarding</h2> <h3>Child Protection Policy</h3><h2>Attendance</h2> <h3>Attendance Policy</h3><h2>Behaviour</h2> <h3>Behaviour Policy</h3>

Long news feature (TOC + anchors)

<h1>STEM Week: Projects & Prizes</h1><nav aria-label="On this page">...</nav><h2 id="projects">Projects</h2><h2 id="prizes">Prizes</h2><h2 id="gallery">Gallery</h2>

FAQs (Featured Snippet-ready)