Headings

Headings are essential for clearly structuring and organizing text. They enable users to efficiently navigate content. There are up to six levels of headings, comparable to the hierarchy levels of a table of contents in a book. This structure is particularly important for people with visual impairments who use assistive technologies to have the headings of a webpage read aloud. Concise and meaningful headings make it easier for them to jump directly to the desired section.

Structuring Headings with HTML

Websites are created using HTML (HyperText Markup Language) to systematically present content. Headings must also be structured so that users can identify whether it is a main heading or a subheading. This structuring is similar to the layout of a book, where the hierarchy of chapters and subchapters is clearly defined. HTML offers up to six heading levels (H1 to H6), where H stands for “Header.” The H1 is the most important heading on a page and should ideally be used only once per article. Levels H2 to H6 serve as subheadings and can be used as often as necessary to further subdivide the content.

Important Notes

Do not skip levels. After an H2 heading, an H3 heading should follow, not an H4, even if this seems desirable for design reasons. An inconsistent order disrupts the logical structure of the page and can be confusing for screen reader users.

Example of Correct Heading Structure

Here is an example of a hierarchical representation of headings from H1 to H3:

<h1>Welcome to the Service Center</h1>
<h2>Current Information</h2>
<h3>New Opening Hours from October</h3>
<h3>Annual Report 2022 Published</h3>
<h2>Forms and Applications</h2>
<h2>Contact and Help</h2>

Checklist for Headings

• Meaningful Summary: Use headings to provide a meaningful summary of text sections.
• Brevity and Clarity: Keep headings short and clear.
• Avoid Layout Headings: Headings should not be used solely for visual reasons. For example, three sentences about changed opening hours do not constitute a heading.
• Logical Order: Ensure that headings from H1 to H6 are structured in a logical order and that no levels are skipped.

By following these guidelines, you ensure that your website is accessible and user-friendly for all users.