why are headings important?

The order of headings on your page matters. It is important for those with Screen readers, it is important for users, and it is important for SEO and Google indexing.

Every single page you create MUST have an H1 and it MUST be the first thing on your page. You will also only have ONE Heading 1 per page, news post, or event. If you are using the banner block, the heading section in there is considered an H1 (Title) – this fulfills the requirement for having an H1 on your page. Should you choose not to use the header on top of the banner image, but still wish to have the banner image block, you MUST have an H1 heading as the first thing in the content section of your page below this banner.

learn more

After you have your H1, there is a hierarchy of headings that you must follow in order. There are very few occasions where you will need to use Heading 5 or 6. The best way to explain this is to think of it in terms of a bulleted list.

For example:

Heading 1 - topic title

Heading 2 - lower topic content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat quam non metus fermentum varius. Donec ornare dolor a justo pellentesque, in faucibus ante auctor. Praesent convallis eget tellus dictum cursus. Nam nisi justo, vehicula id tincidunt a, tincidunt feugiat leo.

Heading 3 - lower topic content

  • Lorem ipsum dolor sit amet.
  • consectetur adipiscing elit.
  • Praesent consequat quam non metus fermentum varius. Donec ornare dolor a justo pellentesque.

Heading 4- new topic content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat quam non metus fermentum varius. Donec ornare dolor a justo pellentesque, in faucibus ante auctor. Praesent convallis eget tellus dictum cursus. Nam nisi justo, vehicula id tincidunt a, tincidunt feugiat leo.

Heading 5 - lower topic content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat quam non metus fermentum varius. Donec ornare dolor a justo pellentesque.

  1. in faucibus ante auctor.
  2. Praesent convallis eget tellus dictum cursus.
  3. Nam nisi justo, vehicula id tincidunt a, tincidunt feugiat leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat quam non metus fermentum varius. Donec ornare dolor a justo pellentesque.

Heading 6 - lower topic content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat quam non metus fermentum varius. Donec ornare dolor a justo pellentesque, in faucibus ante auctor. Praesent convallis eget tellus dictum cursus. Nam nisi justo, vehicula id tincidunt a, tincidunt feugiat leo.

more heading information

As you can see, in order to use a Heading 6, you would also have to have Headings 1, 2, 3, 4, and 5, and their supporting content underneath. This also includes a Heading 6, which would be a subcategory of all of those headings above.

Here is another example using the topic and content of various animals:

Animals (Heading 1)

Mammals (Heading 2)

Examples of mammals include rats, cats, dogs, deer, monkeys, apes, bats, whales, dolphins, and humans.

Dogs (Heading 3)

There are many types of dogs.

Cats (Heading 3)

Some examples of cats include American shorthair, Persian, and more.

Amphibians (Heading 2)

There are many types of amphibians which include frogs, salamanders, and toads.

Frogs (Heading 3)

There are many types of frogs.

  • NEVER link a heading. Either add linked content or a button below it.
  • Headings are titles (or sub-titles). Do not apply Heading styles to non-heading items such as buttons, or random words on the page. Also, do NOT apply heading styles to entire paragraphs, image captions, or other similar items.
  • Do NOT use a Heading 1 inside accordions. An H3 is usually a good heading level to start at since the accordion block “Heading” field is a Heading 2.
  • Do NOT change the font size, font color, or font family of any Heading style.
  • Do NOT center align or right align headings. Headings should be left-aligned, which is the default.

FAQ

Q: Can I use a heading as a way to draw attention to something important?
A: Yes. Headings should be used in a logical order, placed before a text section, and should be short and informative. However, Cascade has many call-to-action (cta) blocks such as link buttons, text links, cta banners. These should be used down a page over using random headers as an attempt to grab a content consumer's attention.

Q: Should I use just headings down a page without additional page content?
A: No. Headings are used to structure content in a logical order and must contain content between headings. Headings help all users know where to start and how content sections relate to one another. Headings help users quickly and naturally understand the content on a page by skimming properly placed headings. However, if there is no content relating to a heading, it may cause the user to think that the content may be hidden especially in the case of a reader using a screen reader. Learn more about content missing after headings.