How and When to Use Heading Tags

— Written By

What is a Heading Tag?

A heading tag is used to introduce or emphasize sections of content within your page or post. Every page begins with a single H1 tag which identifies the title. Subsequent tags, H2, H3, etc., should be used to highlight subsections of your content. While not required, they can be useful for introducing large blocks of content, breaking it up, and making it easier to read and understand.

Headings are also important in making your content accessible to users with disabilities. Headings break up the content into an organized structure much like an outline. Where sighted users can skim a page quickly by reading the visual headlines, a screen reader user can also skim a page by quickly traversing the headings if they are properly used.

How Do We Use Heading Tags on Extension Pages?

Image of Header menuOn our Extension pages, the title you choose for your page or post will automatically be given the H1, or Heading 1, tag. Given this, you should not use an H1 tag in your content (in fact, we’ve removed it as an option in the WordPress editor).

The very first subsection you want to highlight should use an H2 (Heading 2) tag.

In essence, these headings by themselves (when stripped of all other content on the page) should form a document outline or table of contents. Here’s how the hierarchy of tags should be used:

Nesting headers example image

Improper Nesting

You should not use heading tags out of order. For instance, an H3 tag must be preceded by either another H3 tag or an H2 tag. Likewise, an H4 tag cannot be used if there is not another H4 or H3 before it. 

For example:

Incorrect:

H2 This is my heading 2

P Some text about my heading.

H4 This is a heading 4

P Some text about my subheading.

Correct:

H2 This is my heading 2

P Some text about my heading.

H3 This is a heading 3

P Some text about my subheading.

P = Paragraph text

Heading tags should also never be used to highlight entire paragraphs or blocks of content. This includes using an H5 or H6 tag to reduce the size of disclaimer text if you need to add one to the bottom of your page or post.