Heading structure in theme development

Headings are the backbone of your content structure and describe the content on a webpage. Good headings also make the site more easily scannable.

Rules of thumb for theme development:

  • One unique H1 per page, post or archive describing what the page is about. This is for most themes the post -, page – or archive title.
  • Use H2 through H6 to divide sections of the page, such as widgetized areas, comment sections, etc
  • Don’t skip or mix up headings.

Use HTML headings to meaningfully describe the content that follows rather than as a design element.

Web Accessibility Tutorials: Headings describes very clear what the best practices are for headings.

Accessible HTML5 heading structure in WordPress describes the headings setup for a WordPress theme.

The theory of giving all HTML5 sections an H1, as proposed in HTML5.0, has been abandoned (read “Computer says NO to HTML5 document outline” by Steve Faulkner.)

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 perfectly OK at the AA standard.

Resources Resources

Test Tools Test Tools

Top ↑

Heading semantics Heading semantics

Top ↑

Heading structure best practices Heading structure best practices

Top ↑

Heading structure in WordPress Heading structure in WordPress