Headings

Headings briefly describe the topic of the section it introduces. Heading tags (h1, h2, h3, etc.) should be used in order for user agents to automatically construct a table of contents for a document. Screen readers also use headings to help them more easily understand page structure.

By default, the title of a web page is given the h1 (heading level one) tag by the CMS. Any sub-headings within the main web page can use subsequent h2, h3, etc. tags. Each web page should specify only one h1.

This is a Level 1 Heading

This is a level 2 heading

This is a level 3 heading

This is a level 4 heading

This is a level 5 heading

This is a level 6 heading

<h1>This is a Level 1 Heading</h1>
<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>
<h4>This is a level 4 heading</h4>
<h5>This is a level 5 heading</h5>
<h6>This is a level 6 heading</h6>

Accessibility tip: Make sure not to skip heading levels in the content. Headings provide document structure and facilitate keyboard navigation by users of assistive technology. These users may be confused or experience difficulty navigating when heading levels are skipped. Semantic headings can be visually styled using one of the options below.

Alternate heading treatments

Size

You can alter the default size of a heading. If you would like to make an h2 as big as an h3, for example, just use an h1 class.

This is a Level 2 Heading with an h1 Class

<h2 class="h1">This is a Level 2 Heading with an h1 Class</h2>

Case

This is a level 3 heading with a uc class

This is a level 4 heading with a caps class

To be used sparingly. See DH home page for examples in use. Note, caps class is currently only available for h4, but we can expand if the case arises. Pun intended. The caps class does a little letter spacing as well as the color change.

<h3 class="uc">This is a level 3 heading with a uc class</h3>
<h4 class="caps">This is a level 4 heading with a caps class</h4>

Rules

This is a level 3 heading with a rule class

This is a level 3 heading with a light-rule class

See Health Care Pros page for examples in context.

<h3 class="rule">This is a level 3 heading with a rule class</h3>
<h3 class="light-rule">This is a level 3 heading with a light-rule class</h3>