Headings and subheadings

When we read, we rarely read from the first word to the last word. Instead, we scan. We read the headings and subheadings first. Then we’ll read the part that interests us. A page with no subheadings is difficult for both visual and visually-impaired readers to scan and read.

Establish a document structure

Look at your content and break it up into sections. Preface each section with a subheading. Then assign the appropriate heading level for each section. For a degree page, H1 through H3 headings would be as follows. 

  • H1 MA Degree
    The introductory section about the degree would not need a subheading as its content is implied by the H1.

    • H2 Admissions criteria
      Information on admission. This subheading usually only appears for graduate degrees.
    • H2 Requirements for the major.
      • H3 Required courses
      • H3 Electives
    • H2 Concentrations
      • H3 Concentration A requirements and electives
      • H3 Concentration B requirements and electives
    • H2 Course descriptions

Adhere to the hierarchy for accessibility

Style your subheadings using the styles in the CMS editor. Accessibility guidelines require that this hierarchy be followed. Subheadings should be assigned in order and no levels should be omitted, regardless of the appearance or font size of the heading. Never add bold to a heading.

This video shows how the popular screen-reader software, JAWS, reads headings on a Moodle webpage. (Moodle is a competitor to BlackBoard, our WebCampus.)

The headings are extracted into a list, like a table of contents, so the reader can step through the list and jump to the area of interest.

A woman with headphones on waves at someone she is video chatting with on a laptop
Watch and listen

Formatting the heading

The font, size, bolding, color, and alignment of the headings are predetermined by the web design. Never alter these features. Your results will be unpredictable depending on the device the visitor is using and may not be able to inherit changes made to the design in the future.

Subheadings are always left-justified — never center a subheading. 

Never use a fancy paragraph style when the text is a logical heading. Never add bold to a heading. Never add HTML or CSS to the code to change the color or size or anything.

Use italics with a heading only for exceptions like that needed to identify a book or magazine title, or a foreign word.

Use sentence case

Document titles are the only headings that are written in title case, but increasingly publishers are adopting sentence case. Using title case can produce inconsistencies in capitalization. But when the heading is written in sentence case, it’s clear when nouns are common or proper.

  • Dealers Will Hear Car Talk at Noon. (Either a car talks, someone talks about cars, or they listen to Car Talk.)
  • Dealers will hear car talk at noon. (Either a car talks, or someone talks about cars.)
  • Dealers will hear Car Talk at noon. (Car Talk is a syndicated radio show.)
  • Montana Schools Tackle Coke Addiction. (The drug or the product?)
  • Montana schools tackle Coke addiction. (The product.)

The wording of your headings

Headings should be one line, but this is not always possible. But the important words at the beginning of the line. This helps visual and non-visual visitors scan the content quickly. It also tells the search engines which words you think are important.

  • Admissions for the degree
  • Requirements for the degree

Not:

  • Degree admissions
  • Degree requirements

References

"A document needs to be at least 50% white space to be visually readable."
— Making it look good