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 HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. 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 WCAGWCAG WCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/. 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