Skip to main content

Headings

General Principles​

  • Every page should contain exactly one <h1>, typically representing the page title.
  • Headings should follow a strict hierarchical order:
    • Use <h2> directly under <h1>, <h3> under <h2>, and so on.
    • Avoid skipping levels (e.g., do not go from <h2> to <h4>).
  • Do not use heading tags for styling purposes only – use them semantically.
  • Avoid visual headings (e.g., sidebar labels) using heading tags – use <span> or styled components instead.
  • To change the visual formatting of a heading, use CSS rather than using a heading level that doesn't fit the hierarchy. Don't make up your own formatting for headings.

Design & Styling​

  • Define a consistent visual appearance for each heading level (font size, weight, spacing).
  • Use design tokens or CSS variables to make styles reusable and themable (e.g., --heading-h2-font-size). => see Color Guidelines
  • Do not use headings to “fake” visual hierarchy – keep semantic structure and styling separate.

Writing Guidelines​

Headings should be clear, meaningful, and descriptive – vague headings harm accessibility and usability.

  • Please use active language in headings:
    • âś… Good: “Apply for a Doctoral Position”
    • ❌ Bad: “Doctoral Position Application Processed”
  • Headings should summarize the content below them – avoid generic titles like “Information” or “Overview”.

Do's and Don'ts​

✅ Do❌ Don’t
Use one <h1> per pageUse multiple <h1>s
Follow proper order: <h1> → <h2> → <h3>Skip levels: <h1> → <h3>
Use headings to structure contentUse headings for styling only
Write clear, active headingsUse vague or passive headings

Additional Resources​

Sources that inspired the heading guidelines:

Useful tools:

  • SEO META in 1 CLICK
    Offers the section Headers, which can help to analyze the structure of the current page
    Example of a good heading structure shown in the SEO META in 1 CLICK tool