Heading Structure

Headings are a vital part of organizing content on a webpage. They act like a roadmap, guiding users through information in a clear and logical way. A well-planned heading structure not only improves readability but also ensures that your content meets the Web Content Accessibility Guidelines (WCAG). This is especially important for users who rely on assistive technologies, such as screen readers.

A proper heading structure follows a clear hierarchy. Think of it like an outline for a report. The main topic of the page is marked with an <h1> tag. This is the most important heading, and each page should have only one. Beneath the main heading, you use <h2> tags for major sections. If those sections have smaller parts, you use <h3> through <h6> tags. This order helps users understand how information is connected.

For example, a webpage about healthy eating might look like this:

• <h1> Healthy Eating
  • <h2> Fruits and Vegetables
    • <h3> Benefits of Fruits
    • <h3> Benefits of Vegetables
  • <h2> Whole Grains

This structure shows a clear relationship between the topics. Users can easily see that "Benefits of Fruits" is a smaller part of the "Fruits and Vegetables" section.

Screen readers use headings to help users navigate a page. Many users move from heading to heading to quickly find the information they need. When headings follow a logical order, it becomes much easier for them to understand the content. However, if headings are skipped or used out of order, it can create confusion.

To build an effective heading structure, follow these best practices:

1. Use One <h1> Per Page: This heading should clearly describe the main topic of the page.
2. Follow a Logical Order: Move from <h1> to <h2>, then to <h3> and all the way through <h6> if necessary without skipping levels. This keeps the structure clear and easy to follow.
3. Make Headings Descriptive: Each heading should give users a good idea of the content that follows. Avoid vague titles.
4. Do Not Use Headings for Style: Choose headings based on their meaning, not their appearance. Use CSS (Cascading Style Sheets) to change how they look.
5. Test Your Structure: Review your headings by reading them in order. They should provide a clear summary of your content, much like a table of contents.

By creating a strong heading structure, you make your content more organized and accessible to everyone. A clear hierarchy helps all users, including those with disabilities, navigate your webpage with ease. Proper headings improve the overall experience and ensure your content meets important accessibility standards.

Incorrect Structures

Here are a few examples of bad structure that are fairly common across websites.

Skipping Levels

Levels should not be skipped descending. So in the bad example, the jump from <h2> to <h4> skips over the <h3> level, which is incorrect. However jumping up from <h4> to <h2> for the degrees section is fine. In the correct example, no levels are skipped.

Bad relationships between parents and children

Headings should follow the structure of the content and not just all be at the same level. For the incorrect example, when you have a news section heading at <h2>, then the articles below that should be at <h3> and not <h2>.