Headings

Summary

Headings provide structure and hierarchy to web content, making it easier for users to scan, navigate, and understand information.

Properly formatted headings improve readability, accessibility, and search engine optimization (SEO). They should be concise, descriptive, and sequentially ordered to guide users through the content effectively.

Why Headings Matter

Headings are some of the most critical content on a website. They provide structure, improve readability, enhance accessibility, and optimize content for search engines (SEO). Acting as landmarks, headings help users scan content quickly and avoid the overwhelming "Wall of Text." Proper use of headings enhances organization, making content easier to digest and navigate.

  • Improve readability – Breaking content into digestible sections.
  • Enhance accessibility – Helping screen readers and assistive technologies navigate content.
  • Boost SEO – Structuring content in a way that search engines can understand.
  • Support scannability – Allowing users to quickly locate relevant information.

Heading Structure & Hierarchy

Headings follow a hierarchical structure, ranging from Heading 1 (H1) to Heading 6 (H6). The H1 is the most important and should only be used once per page, typically for the page title. Other headings (H2–H6) should be used to organize content into sections and subsections.

How Headings Are Used on Our Website

  • Page Titles: Automatically set as H1.
  • Main Sections: Use H2 within the body component.
  • Subsections: The text editor offers H3–H6 for deeper levels of content.
  • Hierarchy Over Appearance: Select headings based on structure, not visual style, to ensure screen readers and assistive technologies interpret them correctly.

Other Key Principles for Headings

  1. Follow a Logical Order

    • Do not skip heading levels (e.g., <h2> should not be followed directly by <h4>).
    • Maintain a clear, predictable structure.

  2. Make Headings Descriptive & Concise

    • A good heading tells the user what the section is about.
    • Avoid vague labels like "More Information" or "Details".
    • Good Example: "Required Documents for Your Application"
    • Bad Example: "Click Here for Documents"

  3. Do Not Use Headings for Styling

    • Headings should reflect content structure, not just make text look bigger.
    • If you need larger text, use CSS instead of misusing heading tags.

  4. Keep Headings Short and Scannable

    • Aim for 5-10 words when possible.
    • Users skim headings, so clarity is more important than length.

  5. Ensure Accessibility

    • Headings provide a navigation landmark for screen readers.
    • Use clear, meaningful text—avoid phrases like "Section 1" or "Welcome!".

  6. Avoid Formatting Headings Like Body Text

    • Do not bold paragraph text to mimic a heading.
    • Proper headings should be structured using HTML tags (<h1>, <h2>, etc.).

For more on accessibility, visit our Accessibility Guide on Headings.

Examples

Good Headings

  • "How to Renew Your Driver’s License" (<h1>)
    • "Eligibility Requirements" (<h2>)
      • "Age and Residency Criteria" (<h3>)
      • "Required Identification Documents" (<h3>)
  • "Benefits of Online Payments" (<h2>)
    • "Faster Processing Times" (<h3>)
    • "Secure Transactions" (<h3>)

Bad Headings

  • Welcome!" (<h1>)
  • "Click Here for More Info" (<h2>)
  • "Step 1" (<h2>)
  • "Random text that isn't a real heading" (<h3>)

Usability Concerns to Consider

        Avoid Excessive Styling
        • Do not bold or enlarge text to mimic a heading—use proper heading tags (<h2>, <h3>, etc.).
        • Overuse of colors, italics, or underlining can reduce clarity.
        Ensure Uniqueness

        Each heading should be distinct and informative to prevent confusion for users and screen readers.

        Sentence Case vs. Title Case
        • Sentence case (How to apply for a passport) is preferred for readability.
        • Title Case (How to Apply for a Passport) can be used if consistent across the site.
        Avoid Jargon
        • Use clear, simple language to ensure all users understand the content.
        Use Descriptive Labels

        Instead of saying "Click here" use "Download the application form"

        Resources

        Learn More

        To learn more in depth about best practices for headings, visit the NNg: Headings Are Pick-Up Lines and NNg: Passive Voice to learn more.