How to correctly use headings on your webpage

The purpose of headings

As in printed documents, headings are used on webpages to provide structure and indicate content sections. An individual heading is usually a short summary of the content that follows it.

Sighted readers often scan a page and read the headings first to find out what information it contains. They may then read in detail only the sections they find interesting.

Headings greatly improve reading comprehension. Imagine trying to find information on a page which is an undifferentiated wall of text. Now imagine there are headings before the various sections. They make it much easier to understand the content and find what you’re looking for.

For non-sighted readers, headings are even more essential. People with visual impairments who use screen readers to navigate the web often read through the headings on a page first to get an idea of the contents, then use the headings to navigate to the parts they are interested in. For them, headings are like a map, or anchors. For this reason, using headings, and using them correctly is essential for accessibility.

For a demonstration of how a blind user navigates websites using headings, see the YouTube video Importance of HTML Headings for Accessibility

How to use headings correctly

Use headings!

Not all content requires headings—if it’s very short, only a paragraph or three, the main page title may be enough. However, within a longer document, use headings for the different sections. This will make it more scannable and understandable for users.

Use actual headings - don’t just apply bold or format the text to look like a heading

The screen readers used by visually impaired people rely on actual heading markup—the HTML code that indicates a heading. Visual cues like font size, bold, different colours, etc, are meaningless to them.

To mark a heading, click to insert your cursor in the heading text and use the “Format” dropdown in the text editor to select a heading level 2 - 6. These levels must be chosen correctly to provide correct structure to the document—see “Don’t skip heading levels” further on for more information.

There are other styles in the “Styles” dropdown that can be used to provide emphasis to the text by making it larger, bolder, or a different colour, but for actual document headings, heading tags must be used. (See “How to emphasize text which isn’t a heading?” further on.)

For sighted users, correct heading use also provides visual cues about the structure of the document, as well as providing consistency throughout the site. Consistency is one of the most important factors in usability—how easy it is for users to understand and navigate your site.

Don’t skip heading levels

Heading levels must correspond to the document structure.

Heading level 1 is used only once on any page—for the main title. When you create the page title, it is automatically tagged as a Heading 1.

Headings of the main sections of your page should be tagged as Heading 2. Headings of sub-sections of main sections are Heading 3. Sub-sections of those sub-sections are Heading 4, and so on.

Don’t be tempted to skip heading levels because you like the font size or colour of a different level of heading. Headings are not used for graphic styling, they are used to provide structure and meaning to your page. In other words, they are not to make text look nice—their correct use is relied upon by many users in order to navigate and understand your content.

Understand the logical structure of your content

Figuring out what heading level to use requires understanding the logical structure of the content. A Heading 3 should not be used just because it comes after a Heading 2; is that section of the document a sub-section of the section with Heading 2, or is it another section on the same level?

For example, if you’re creating a page for a course, you might have these headings:

  • Course Overview
  • Facilitators
  • Schedule
  • Location
  • Registration

Etc. All of these headings would be Heading 2; they are equal sections of the content at the top level.

However, suppose you add a Heading 2 after “Course Overview” that reads “Course Details”. Facilitators, Schedule, Location, etc, would then be sub-sections of Course Details and become Heading 3.

Under Registration you might have further sub-sections titled “Cost” with information about price and early bird discounts; and “Register Online” with instructions and a link to register. “Cost” and “Register Online” would be Heading 4 because they are sub-sections of “Registration” (Heading 3), which in turn is a sub-section of “Course Details” (Heading 2).

Example structure for a page (minus the content below the headings):

My Exciting Course [page title - Heading 1]

  • Course Overview [Heading 2]
  • Course Details [Heading 2]
    • Facilitators [Heading 3]
    • Schedule [Heading 3]
    • Location [Heading 3]
    • Registration [Heading 3]
      • Cost [Heading 4]
      • Register Online [Heading 4]

Note:

  • Document structures will vary depending on the content and how you choose to organize it.

  • You may not, and usually won’t, use all heading levels on a page. Your document structure may require only Heading 2s, or 2s and 3s. However, more complex documents require deeper levels of content division.

Don’t repeat the page heading

Often the first thing content creators put on their page is another heading which is a duplicate of the page title. This is redundant - allow the main title to stand on its own.

Don’t apply bold or other formatting to headings

The headings on Tyndale’s website have been styled specifically; please don’t bold them or apply other styles.

Don’t mark non-heading content as a heading in order to emphasize text

Headings should not be used just because you want a certain piece of text to be emphasized—bigger, bolder, or a different colour. There are a few styles you can use to do that—we’ll talk more about that in a minute.

Headings should only be used as headings of document sections. They should not be the only things on your page; all of your content should not be headings.

Headings are brief titles of the following content. There should be non-heading content below each heading.

How to figure out when to use headings?

Example: You may want to emphasize certain details of an event, such as the speakers’ names or the time and location. However, that information is not a heading; it’s part of the event information. It should not be formatted as a heading.

You can create headings for those sections of your event, for example “Speakers” and “Time and Place”—if the content is long enough to warrant it. If the content is very brief, you could bold the speakers’ names and the labels Time and Location to draw attention to them (don’t bold everything).

There may be exceptions. For example, the 2017 Tyndale Youth Ministry Leadership Conference is a long page with several sections, one of which is “Keynote Speakers” (marked as Heading 2). Each speaker’s name is a Heading 3, followed by their bio and a photo.

In this case, the speakers’ names are the headings of their bios. They are part of the document outline; there is a significant amount of content associated with them. If your event contains only a list of speakers’ names and maybe a short sentence associated with each one, making them headings is not warranted.

It can be tricky to figure out what is a heading and what isn’t—the webteam is always happy to help.

How to emphasize text which isn’t a heading?

Let’s say you have some text on your page which is not a heading, but you wish to emphasize.

This is the situation when you might use one of the styles in the text editor “Styles” dropdown. Or, you can simply use bold (with restraint; don’t bold large chunks of text).

Examples of when you might use emphasized text

  • You want to let people know that if they register early for your event, they will receive a 10% discount

  • There is a deadline for applications and you want to emphasize that they need to be submitted by that date

  • Your office will be closed at an unusual time and you want to notify students

The emphasized text would not be used instead of headings, but as part of a document with correct heading structure. The examples above might be part of document sections with the headings “Event Registration”, “How to apply”, and “Office Hours”, respectively.

Don’t overdo emphasis

A cardinal rule of emphasis is to use it sparingly. If everything is emphasized, nothing is.

  • Use emphasis only for really important content, and/or the most important words or phrases in the content

  • Don’t use more than one type of emphasis on the same text. For example, text should be bold or italic, not both. If you put text into a coloured box to make it stand out, don’t also make it bold (at least not all of it—you can use bold or italic for individual words or phrases as appropriate). The idea is to draw the user’s attention by skillful and restrained use of emphasis, not hit them over the head (or the eyeballs).