Headings

The importance of heading order

When selecting heading levels, ensure that they are in outline order. This will help the semantic structure of your page and assist those using non-visual devices. For example, a Heading 4 should only be a sub-heading of Heading 3, not Heading 2.

The title of the page is considered Heading 1, which is edited through the Properties tab. The heading options within the toolbar are Heading 2 - Heading 5, which is in order of visually largest to visually smallest. 


Tips

  • The topics of the headings should all relate to the page title/heading 1 of the page
  • Heading 2 is used to show the main points of the page and they each relate to the Heading 1 (page title)
  • Heading 3s can be thought of as sub-topics or sub-categories to the Heading 2, then Heading 4s and even more narrow sub-topic that further supports the Heading 2
  • The need for heading structure also applies to the "Auxiliary Content" column but headings in this column will display different than they will in the "Main Content" column.

Heading display in Main Content area

Headings will display differently in the Main Content area (this column of content) of the template than the Auxiliary Content area. Below are how the headings appear in Kentico.

Heading 2

Heading 3

Heading 4

Heading 5

Stylized headings

Content editors aren't encouraged to stylize headings without reason. If all headings look the same or are inconsistent with the rest of the website, it negatively impacts the user's experience.

The point of headings is provide a navigational page structure for your end-user. People don't read pages, they scan them and good heading use increases how easily an end-user is able to scan and comprehend the information.

Example

Heading 3s can be bolded to look like a Heading 2; the screen reader will still read it has a Heading 3. Below is how all headings will appear if stylized with the "bold" option.

Bold Heading 2

Bold Heading 3

Bold Heading 4

Bold Heading 5

 

Read more about headings

Headings in Aux content

Headings and text in this column will display different than it will in the "Main Content" column.

Heading 2

Heading 3

Heading 4

Heading 5