Headings for scanning content

The use of headings helps us scan web pages more quickly for relevant content. But, it is typical to come across web pages with paragraph after paragraph of text and with few or no headings.

Here is an example of two back-to-back paragraphs from a UW web page:

The 15 departments that make up the faculty, along with the School of Accounting and Finance, offer five undergraduate entry programs and over 30 majors. Our core strength is flexibility so many of our programs and courses can be taken through the main campus or one of the four University Colleges. In total, we offer more than 425 undergraduate degree options.

We also offer 14 Masters and nine PhD programs. With world-renowned research centres located within the Faculty of Arts, our graduate studies programs provide world-class learning opportunities.

Here is an example of the same paragraphs with headings:

Undergraduate studies

The 15 departments that make up the faculty, along with the School of Accounting and Finance, offer five undergraduate entry programs and over 30 majors. Our core strength is flexibility so many of our programs and courses can be taken through the main campus or one of the four University Colleges. In total, we offer more than 425 undergraduate degree options.

Graduate studies

We also offer 14 Masters and nine PhD programs. With world-renowned research centres located within the Faculty of Arts, our graduate studies programs provide world-class learning opportunities.

You may notice that your eyes are drawn to the headings because they stand out through size, weight and/or colour. This helps us scan the headings on a web page.

Also note that the heading-text must clearly state what the text of the following paragraph is about. If the heading-text is incorrect or misleading, then it is frustrating!

Define headings properly

Defining a heading does not mean simply highlighting the text and making it bold and bigger. Heading tags need to be used to define headings properly.

If you are using a web-content editing tool (e.g. Dreamweaver or Contribute), you should be able to highlight the heading-text and select a heading option such as Heading 2, or Heading 3.

If you like to work with the HTML code, then place heading tags around your heading-text:

<h2>Heading text</h2>

Accessibility of headings

Properly defined headings help with the accessibility of web content. For example, screen readers for visually impaired people can jump from heading-text to heading-text when headings are properly defined. Note that the wording of headings is also important: the heading-text must clearly capture what the text right below is about. So, properly defined and worded headings can help those using screen readers get to relevant content more quickly by scanning the headings for relevant information.

Note about examples used

Note that choosing examples for my posts is entirely random. When I have a tip that I would like to share, I search through UW websites and web pages until I find an example – or two - that can help explain the tip. If one of your websites or web pages ends up being an example, then please consider implementing the tip.