Heading structure on the web

An illustration of a young leader pointing up toward the leadership key.

Having a well formed heading structure, on every page and post, can help our website:

  • show up in search better (SEO!),
  • be scannable and readable by users,
  • translate well on other devices (screen readers, sharing apps, readability and read later apps, PDF makers, etc.)
  • convert customers

Different websites and organizations adopt different styles for headings and capitalization, but everyone hopefully is striving to uphold roughly the same web publishing structures and formats. In terms of style, we use non-punctuated sentence-case headings. Here’s more on our style guide.

Every page starts with heading one (h1)

On the web, headings are marked up with HTML as h1 (heading one), h2 (heading two), h3 (heading three), and on. Text that is made larger, and bolded, is not necessarily a heading. A heading has to be marked up as a heading with heading tags, e.g. h1, h2, h3, etc.

The heading structure of a page or post should look like an outline.

Example heading structure

Here’s an example of a possible webpage heading structure.

h1
  h2
    h3
      h4
      h4
      h4
  h2
  h2
    h3
    h3
  h2
  h2
  h2
    h3
       h4
  h2
Scroll to Top