Headings in the content

What are headings? #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. Don’t skip levels.

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, ask the theme developer of your website to adjust this in the theme’s CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.. Selecting a heading based on size might make a change of theme more difficult – it’s better to adapt the desired style to the heading than to change headings to match the style.

Top ↑

Examples of Heading Structures #Examples of Heading Structures

Your site’s headings should resemble a structure similar to this one on a homepage full of blog posts.

• Heading 1 (post title)
  • Heading 2
    • Heading 3
  • Heading 2
    • 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
  • Heading 2: What are Headings?
  • Heading 2: Examples of Heading Structures
  • Heading 2: Test tools
  • Heading 2: Resources

Top ↑

Test tools #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

Top ↑

Resources #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

Last updated: May 7, 2018