Headings and Subheadings

Headings and subheadings define the structure of a web page as well as structuring the text narratively and visually.

From an accessibility point of view, people using a screen reader are able to identify the structure of the page so that they can go through the page navigating by headings.

  • Heading levels 1 to 6 (<h1> through to <h6>) are used to structure sections of content on the page and represent the document's hierarchical structure.
  • Headings and subheadings will be bolded by default.
  • Web headings have their own format and cannot be changed.
headings in semantic order. h1, h2, h3, h4,
Content Approver

Content Approver

Heading 1 is by default the title of the page therefore; you must have one single Heading 1 for each page.

Tips

  • The heading must be descriptive and not too long.
  • The heading 1 (the title), needs to provide enough information about the page to help the user know what the page is about.

checkmarkGood example of a descriptive heading 1 is: "GoodLife Fitness – Frequently Asked Questions".

checkmarkBad example of a heading 1 is: "Frequently Asked Questions".

Heading 2 is a subsection of the last Heading 1 of the page. It divides pages into consumable sections, which help to organize the content. Therefore, it can be used more than once on a page.

Heading 3 is a subsection of the last Heading 2 of the page.

Heading 4 is a sub-subsection of the last Heading 3 of the page, and so on.

If you need more information about structuring headings, consult the Content Style Guide.

How to create headings in Microsoft Word using Word's default styles

  1. Select the Home tab in the ribbon.
    home tab
  2. Select the text you want to turn into a heading.
    Select text
  3. Select the appropriate heading level in the Styles group.
    heading level

    The selected text will automatically change to the proper chosen heading format.

  4. Press "Enter" on your keyboard to move your text cursor to the next line. The heading formatting will automatically turn off then.
    enter
Content Publisher

Content Publisher

The main heading must be within the h1 tag with an id of "wb-cont". This identifier is important for accessibility because it allows the user to skip to the main content from the top menu.

Code example: <h1 id="wb-cont">GoodLife Fitness – Frequently Asked Questions</h1>

swooshThe iService logo (swoosh) is included by using cascading style sheets (CSS). If edits are required, the location is in Teamsite: //MLAP3778/edsc-esdc/main/iservice/WORKAREA/share/docs/sp-es/js/css.

This is the code to look for if it requires editing: /* iService logo */
h1:before { content: url("http://iservice.prv/eng/imgs/iservicelogo-small.png");
/*h1:before { content: url("http://iservice.prv/eng/imgs/iservice_swoosh_pink.png");*/
margin-left: -.500em;
margin-right: .25em;
margin-top: 0;
margin-bottom: 0;
}

Please read this article from WebAIM on Semantic Structure and review the examples on the WET to learn more about structuring page content.