Browser not supported

You are using an old browser that we do not support anymore. Please consider using a modern web browser such as Microsoft Edge, Google Chrome or Firefox for the best website experience.

Use a Logical Headline Structure

Ensure that your headlines are arranged in a logical order and that they have a semantic relationship to the following text.

  • Use a consistent structure from H1 to H6 on your pages. H1 should only be used once per page.

  • Do not skip levels between headlines (e.g., from H1 to H4 to H2).

  • Utilize the hierarchy for recurring patterns of elements (e.g., product descriptions, posts).

  • Short and concise headlines help screen reader users navigate quickly between headings.

Do this

Headline 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Headline 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Headline 3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut

Avoid this

Headline 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Headline 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Headline 3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut

Please also do not use the headline format to display only the text in a large size. This can lead to confusion with regard to SEO, the screen reader or navigation

This could also help you

Write Understandable Content

Write Understandable Content

This topic is not web-only but might also influence more than one area of your job. In multiple cases you might be creating textual content for the website or any other medium.

Click here to learn more about understandable content.

Meaningful Link Text

Meaningful Link Text

When designing websites, it’s essential to pay careful attention to the links and buttons you include. Ensure that your link text clearly communicates the destination or purpose of the link to the user.

Click here to learn more about meaningful link text.

Alternative Text

Alternative Text

Use alternative text (Alt Text) to provide a brief description of the image for people who are visually impaired or blind, allowing screen readers to convey the content. Alt Text is only necessary when it is contextually relevant and important.

Click here to learn how to set alternative text.

Avoid text on images

Avoid text on images

Screen readers cannot recognize text within images. Therefore, avoid placing text content within images to ensure that people who are visually impaired or blind do not miss out on any information.

Click here to learn how to avoid text on images.

Logical headline structure

Logical headline structure

Ensure that your headlines are arranged in a logical order and that they have a semantic relationship to the following text.

Click here to learn how to build a logical headline structure.