Headings in the content

What are headings?

Headings are the framework of your content. A good heading should simply and concisely describe the content that follows.

The heading level is important. The H1 (heading 1) is reserved for the post or page title. For most themes that is the title you give a page or post. Use heading 2, 3 and 4 to divide your content into meaningful sections, like the index of a book.

Choose heading levels by meaning, not by visible size. This way search engines and screen readers (software used by your blind visitors) understand the structure and meaning of the content better. Headings are the index of your content. Content with a good heading structure ranks better with the search engines. Use it to divide content into scannable blocks; both Google and your visitor will like it.

If you don’t like the sizes of the headings in your content, you should adjust the design of the heading rather than selecting a different heading. This helps with accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) as well as with content adaptability. Selecting a heading based on size might make a change of theme more difficult.

Examples of Heading Structures

Your page’s headings might resemble a structure similar to this one on a complex page:

• Heading 1 (post title)
  • Heading 2 (major section)
    • Heading 3 (subsection)
  • Heading 2 (additional major section)
    • Heading 3
      • Heading 4
    • Heading 3
      • Heading 4
  • Heading 2
    • Heading 3 (post sub-heading)
    • Heading 3 (post sub-heading)

If we use this post as an example, the heading structure for the content looks like this:

• Heading 1: Using Headings in Content (main post topic)
  • Heading 2: What are Headings? (subsection)
  • Heading 2: Examples of Heading Structures (subsection)
  • Heading 2: Test tools (subsection)
  • Heading 2: Resources (subsection)

Test tools

With these tools you can get an overview of the heading structure of your webpage.

• WAVE
• Headings map for Chrome
• a11yTools Extension for Safari MacOS
• Tota11y

Resources

• Use proper heading elements to indicate the page’s content structure
• Writing Accessible Content
• Headings and why you should use them
• Accessible HTML5 heading structure in WordPress
• Also in this handbook: Heading structure in theme development