Heading Examples

Examples of headings

Following the title, or H1, the first heading should be a Heading 2 (H2) and if there's more detail needed the next heading should be a Heading (H3).

Note: H1 Will always be the Title of the page. There is no H1 in the Headings dropdown menu.

H2 Heading

H3 Heading

H4 Heading

H5 Heading

Example - Was a heading level skipped?

 In the following example, the H3 is skipped.

If you don't use headings hierarchically, 

• Editoria11y may flag the following issue:
  Manual check: was a heading level skipped?
• SiteImprove may flag the following issue:
  Siteimprove issue: Headings are not structured

H2 - Title in Lorem ipsum

H4 - Description in Lorem ipsum

Lorem ipsum dolor sit amet sint cillum tempor. Occaecat dolor eu do fugiat reprehenderit ullamco veniam commodo. 

Ad aute dolore magna velit. 

H5 - velit ad labore id sint.

• Lorem ipsum
• dolor sit amet
• ad dolor elit irure
• in dolore.

Example - Content missing after heading

If you use a heading without following content, 

• SiteImprove will flag: Content missing after heading
• Editoria11y will flag: Heading tag without any text

For spacing

In the text area, this can be a heading followed by a heading added inadvertently when you're creating space on the page, for example:

Lorem ipsum

If you look at the Editoria11y and Siteimprove results for this page, they both find an empty H2 just before this sentence.

Instead of styled text

This can be caused if you use heading instead of styling the text.

• In the first example, there is some following content, so the words "Jane Stanford" are a heading. In HTML it's <h2>Jane Stanford</h2>.
• In the second example, there is no following content, so the words "Jane Stanford" are boldly styled text.