Heading structure in theme development

TODO: This content should be reviewed and restructured.

Headings are the backbone of your content structure and describe the content on a webpage. Good headings also make the site easier to scan. As a sighted user, we’re accustomed to seeing sections of content broken up using various font sizes that highlight groups of related content.

Visually, it only matters that these are set off in design. Using appropriate heading levels is the screen reader equivalent of good visual design: if headings are not present, then all the text is undifferentiated – if headings are used inappropriately, then content doesn’t make sense.

Rules of thumb for headings in theme development:

  • One unique H1 per page, post or archive that describes the primary topic of the page. In most themes, this is the post -, page – or archive title.
  • Use H2 through H6 to divide major sections of the page, such as widget areas, comment sections, or other major segments of the page.
  • Use headings in a logical and hierarchical structure.

Use HTML headings to meaningfully describe the content that follows, not as a design element. A heading means “this text describes the information that follows it.” There should not be text before the heading that is part of what that heading describes, and there must be content following the heading.

Note: If you use a headings validation tool, a warning may pop up when the first heading is not an H1. This only applies when your web page needs to comply with WCAG 2 AAA (triple A). The global web standard is WCAG 2 AA (double A) and starting with an H2 (for e.g. the navigation) is allowed at the AA standard.

Testing Tools

Heading semantics

Heading structure best practices

Heading structure in WordPress

View this page on GitHub