I always tell people that editing text on the web is a lot like using Word or Outlook or Gmail with a couple big exceptions. Probably the biggest is Headings. You can read about what Headings are and how to use them in my previous post, “H1: Headings are Important.” What I want to focus on today is common mistakes when it comes to using headings.
Quick Refresher
Remember, headings are a way of formatting text to divide it into sections. When used correctly, a computer can infer an outline of a page, and this is the primary purpose of headings!
A partial outline of the above article as defined by the headings in the article looks like this ([H2] = “Heading 2”]):
- [H1, Article Title] H1: Headings are Important
- [H2] What Are Headings?
- [H2] The Advantages of Headings
- [H3] Accessibility & Usability
- [H3] Visual Consistency
- [H3] Search Engine Friendly
- [H2] Guidelines for Headings
- [H2] How to Make Headings in WordPress
Unlike some types of formatting, like italic, headings have a specific meaning so they can be used in objectively correct or incorrect ways. The rest of this article focuses on the things to avoid with headings.
Heading Mistakes
So here are the mistakes I see most from most to least frequently.
Selecting By Style
Yes. Headings look different than text. It helps them stand out when compared to a paragraph or bold or italic text. However, headings are NOT primarily a way of determining how text looks. Similarly, if you want to use one level of heading rather than another because of how it looks, you’ll likely choose the wrong heading.
This is probably the #1 mistake I see. If you want to make text bigger or bold or colored, then headings are the wrong way to achieve that goal.
Focusing on the visual styles of headings probably leads to most of the other mistakes, but let’s cover them anyway!
Skipping Heading Levels
Remember, you’re making an outline of a page when you add headings, so every heading must be either:
- The same level as the previous heading
- One level lower than the previous heading
That means no jumping from Heading 2 to 4 or skipping Heading 2 and only using a lot of Heading 3s.
That would look like this:
- [H1] All About Cheese
- [H2] Types of Cheese
- [Empty]
- [H4] Cheddar
- [H4] Swiss
- [H4] Richard
- [H2] Types of Cheese
See that weird blank spot? That makes no sense! But that’s what happens when you skip a level of heading. I see this version a lot too:
- [H1] All About Cheese
- [Empty]
- [H3] Types of Cheese
- [H3] The History of Cheese
- etc.
Again, that blank’s a no-no! ((Further proof that this is a bad idea. Just getting my lists to indent like this in the WordPress editor is requiring some awkward hacking. Outlines don’t make sense when they’re missing a level!))
Using Formatted Text Instead of Headings
Just as it’s a mistake to use a heading solely for its visual appearance, it’s important to use headings to break up content rather than just bolding, italicizing, underlining, or coloring text. For most pages that are longer than 400 words or so, you’ll probably want to break it up with headings to add structure to the page.
Using Heading 1 for Anything but the Title
Despite what some may say, the only Heading 1 on the page should be the page title. In any normal content management system, that formatting should be applied for you. Therefore, even if your editor lets you add Heading 1s, don’t. The main sections of your page should use Heading 2s.
Having No Non-Heading Content Following a Heading
Other times, I see users making nearly an entire page with headings! If it wasn’t clear, each of those sections in my cheesy example outline are followed by information on that subject. A page’s outline shouldn’t be readable on its own.
- [H1] Our Programs
- [H2] Our services are available to low-income K12 students throughout the midwest and plain states.
- [H3] Our programming includes afterschool homework assistance, child care, extracurricular sports teams, and enriching fieldtrips.
- [H2] Our partners make all our programs possible through their generous fundraising. A special thanks goes out to largest on-going supporter, XYZ Grocery Chain.
- [H3] We are also thankful to WZZZ88.7 Put you to Sleep Radio, Frackin’ Awesome Petrochemical, and the Phil and Belinda Skates Location.
- [H2] Our services are available to low-income K12 students throughout the midwest and plain states.
With few exceptions, a heading should always be followed by body text on that subject. While the ordering of headings doesn’t technically break the rules here, this isn’t how they’re supposed to be used.
Using Headings Sequentially
This is a less-common mistake, but worth including. There are 6 levels of headings (1-6), but that doesn’t mean you use them in order and then stop at 6. That would look like this:
- [H1] All About Cheese
- [H2] Types of Cheese
- [H3] The History of Cheese
- [H4] How to Make Cheese
- [H5] Cheese in Popular Culture
- [H6] Rodent’s Affinity for Cheese
- [H5] Cheese in Popular Culture
- [H4] How to Make Cheese
- [H3] The History of Cheese
- [H2] Types of Cheese
Those are each separate, parallel sections that should all be Heading 2s except for the H1: All About Cheese. It would be wrong to say that “The History of Cheese” is a “Type of Cheese”
Coming Up
That’s enough for now, but I’ll be back next week with more info on how to test for heading errors and some possible fixes to common complaints about headings.