Crafting Headings and Subheadings

POW!August 2011

According to the Web Style Content Guide (1):

On the Web, you live or die by your headings
A good one makes it easier for readers to find your article, and much more likely that they will read what you have written. A  bad heading ensures that few, if any, readers will find your text at all, and that those who do will be unlikely to read further.” (2)

O–kay. Sounds important, even critical. Let’s get down to it, then:

Back to top
 

Elements of a Good Heading

Good headings help search engines find your webpages, and they help readers scan webpages efficiently for content of interest. Among other things, good headings (and subheadings):

  • divide your content into different sections
  • include keywords that your visitors use
  • start with the keywords of visitors
  • are concise, yet give a clear preview of the content to follow
  • may be written as questions that your visitors typically ask
  • are distinct from the other text on the page (either by color or by size)
  • are formatted using HTML heading tags (<H1>, <h4>, etc.)

Back to top
 

Tips for Writing Good Headings, with Examples

Let’s take a closer look at each of the bullets in the list above.

Divide your content with headings
Headings (and subheadings) are a great way to divide up your content and make it easy to scan at a glance. Headings also signal to readers how information on the page is organized—what’s subordinate to what. So be consistent with the color and size of headings at different levels of importance. (3)

How you divide up the actual content is discussed in the separate webpage Chunking Your Content.

Back to top

Include keywords in your headings
Keywords are an important part of how readers scan webpages for info of interest to them. (4) They’re looking for a word or phrase that tips them off that the page holds content that’s relevant to them. If they see a keyword in a heading or subheading, they know just where to go on the page and start reading in earnest.

Use the keywords that your readers use rather than generic headings such as “Introduction” or “Overview.”  For example, NICHCY uses the heading “Is There Help Available?” in many of our disability fact sheets, because “help” is what so many of our visitors are looking for, especially those new to the disability experience.

Example
From CADRE, the Center for Appropriate Dispute Resolution in Special Education

CADRE’s Resolution Meetings: A Guide for Parents
Rather than use headings such as “Benefits”, “Concerns”, and “Frequently Asked Questions” in this brochure, CADRE uses “Benefits of Participating in a Resolution Meeting”, “Concerns about the Resolution Meeting”, and “Frequently Asked Questions about Resolution Meetings.”

The inclusion of the words “resolution meeting” in each heading makes it very easy for search engines such as Google to find and share the brochure. In fact, enter the term “resolution meeting” in the Google search engine. CADRE’s brochure comes up in positions 1, 2, and 3. Score!

Back to top

Start headings with keywords
Even better than infusing your headings and subheadings with keywords used by your readers is STARTing the heading/subheading with a keyword. Web readers tend to skim the first two words of headings, sentences, and paragraphs along the left margin, so they’re more likely to register (and stop at) a keyword placed there. (5)  So it’s a good strategy to front load those keywords!

Example
From the Effective Practices in Early Intervention page.
Good headings include: Organizations with Serious Expertise | Addressing Behavior Challenges in Young Children |  Assistive Technology for the Little Ones

A heading we need to re-write: Let the Child Play (to Learn)!
Too cutesy, not informative enough. And definitely not front loaded with significant words!

Back to top 

Be concise but give a clear preview of the content to follow 
The prevailing web wisdom holds that headings should be short and strongly descriptive of the content to follow—between 4 to 8 words. (6)  Short, descriptive headings give web visitors a good idea of what content is going to come under that heading. If that’s not the content they’re looking for, they can skip over the section without wasting any time or clicks. On the other hand, the content may be just what they’re looking for, and the heading has helped them find it quickly.

Jakob Nielsen discusses the art of giving readers a good preview of content in a handful of well-chosen words. In his article World’s Best Headlines: BBC News, he’s talking about headlines (not headings throughout a webpage), but his admiration for BBC’s conciseness and precision is evident.  The average BBC headline used 5 words and 34 characters, yet “the amount of meaning they squeezed into this brief space is incredible.” (7) The headlines alone gave readers enough information to decide immediately whether the full article would be of interest.

Examples
2 headlines from the BBC News, courtesy of Jakob Nielsen:
Iran accuses journalist of spying  |  Villagers hurt in West Bank clash

Examples
From Reading Rockets’s Top 10 Things You Should Know About Reading
Headings in the article include: Too many American children don’t read well | Learning to read is complex | Kids who struggle usually have problems sounding out words

Back to top 

Pose questions
Questions can make good headings, especially when they mirror the questions your users ask.

Example
In our Placement, Short-and-Sweet webpage, the first 3 questions (as headings) are:
What does IDEA require? | Who makes the placement decision? | On what is the decision based?

You can also pose the questions in the user’s voice, and answer in your own voice, making the content into a back-and-forth conversation. (8)

Example
Who decides if my child is eligible for special education?

Your child’s eligibility is decided by a team of people that includes you, the parents. The team also includes….

Back to top 

Make headings look different from the other text
Does this suggestion even need to be given?!  Probably not.

But there’s more to this story than stating the obvious. As you’ll see in the next point…

Back to top 

Format headings with HTML heading tags
HTML is one of the languages that web developers use to create and render the pages of a website. Heading tags in HTML are interpreted by the website’s style sheet in a consistent way (size, color, font) depending on their level (H1, h4, H3, and so on).

Web writers use the different levels of the heading tag to show the hierarchy or organization of the content. We do this in print, too. How the heading appears to readers (e.g., its color, its size, its position on the page) signals which ideas are overarching and which are related but subordinate. (9)

Why are we going into all this detail? Because:

  • Search engines use the <H> tags in HTML to categorize the importance of information on a webpage
  • Screen readers can use the <H> tags to jump through a webpage’s sections  
  • Web visitors scan headings to see what content they’ll find in a particular section or subsection of the page
All this is to say: Follow web conventions to help readers find the information they’re looking for in your content. When posting on the web, code your headings with an appropriate level of the <H>  tag. This is different from merely bolding the text, especially for search engines and screen readers. For example, the red headings on this page are coded with an <H4> tag.If you’re not sure how to code headings on your website, check with your web developer or the online forum for your web content management system (CMS).

Back to top

Want to read another section of Writing for the Web?

Want to read another of the “chunks” in our Writing for the Web discussion? Use the links below to jump there quickly.

 Back to top

References

1 | McGovern, G., Norton, R., & O’Dowd, C. (2001). Web style content guide: The essential guide for online writers, editors, and managers. Upper Saddle River, NJ: Financial Times Prentice Hall. Sections of the guide are available online at:  http://www.gerrymcgovern.com/web_content_style_guide.htm

2 | McGovern, G., Norton, R., & O’Dowd, C.  (2001). Web headings that work. Web Style Content Guide (Part 4). Available for purchase at: http://www.gerrymcgovern.com/books/web-content-style-guide

3 | Krug, S. (2006). Don’t make me think: A common sense approach to web usability (2nd ed.). Berkeley, CA: New Riders.

4 | Nielsen, J. (1997, October 1). How users read on the web. Online at:  http://www.useit.com/alertbox/9710a.html

5 | McAlpine, R. (n.d.). Eyes top left: Lessons from Eyetrack III. Online at the Quality Web Content website:  http://www.webpagecontent.com/arc_archive/176/5/

6 | Redshaw, K. (2003). Using headings in web writing. Online at the KerryR.net Content Matters website: http://www.kerryr.net/webwriting/techniques_headings.htm

7 | Nielsen, J. (2009, April 27). World’s best headlines: BBC News. Online at: http://www.useit.com/alertbox/headlines-bbc.html

8 | Redish, J. (2007). Letting go of the words: Writing web content that works. San Francisco, CA: Elsevier.

9 | U.S. Department of Health and Human Services. (2006). Headings, titles, and labels. Research-based web design & usability guidelines (pp. 76-84). Washington, DC: Author. Online at: http://www.usability.gov/pdfs/chapter9.pdf

Back to top