I’m on a mission to make sure everyone uses headings. They’re easy, they’re intuitive (i.e. you’ve used them before; you just don’t know it yet), and they make the web a better place.

What Are Headings?

Headings give structure to a web page. This structure is both visual and technical, meaning that a human can see it (or hear it, more on that later) and a machine can understand it.

This structure is like an outline of the page.

Think about a single webpage as a textbook might help explain this best. There are up to six possible headings.

• Heading 1 is the book’s title. There’s only one title because everything else is a subsection of that heading. Ex: “The Human Body”
• Heading 2s are the chapter titles. They divide up the book into easily consumed chunks covering a specific topic. Ex: “Bones of the Body”
• Heading 3s are subsections of the chapters like specific examples or steps in a process. Ex: “The Neck Bone”
  
• Headings 4s, 5s, and 6s don’t get used all that much, but every once in a while, you’ll need to subdivide a heading 3 or 4. ((If you really need to use heading 4s, 5s, or 6s, your page might be too long. Consider splitting it up into multiple pages where those heading 2s become heading 1s.)) Ex: “The Neck Bone’s connected to the Head Bone”

This very post uses headings to express the following structure ([H2] = “Heading 2”]):

• H1: Headings are Important
  • What Are Headings?
  • The Advantages of Headings
    • Accessibility & Usability
    • Visual Consistency
    • Search Engine Friendly
  • Guidelines for Headings
  • How to Make Headings in WordPress
  • Heading Out Into the World Wild Web

Take a moment to review this outline and make sure you identify the headings on the page.

One common misconception is that headings are just an ordered list of points: 1, 2, 3, 4, 5, 6. However, this isn’t the case because headings are hierarchical (like the textbook title and chapter titles). The above diagram has headings in this order: 1, 2, 2, 3, 3, 3, 2, 2, 2.

The Advantages of Headings

Accessibility & Usability

Headings increase a page’s usability by making the it more “scannable.” Nobody reads pages from top to bottom. Instead, one’s eyes flow down the page looking for relevant keywords to explore more closely. By breaking a page up with headings, a user can scan the page faster and more effectively.

Headings also allow scanning of the page by anyone using a screen reader to hear the page’s content. With headings, a screen reader can read the page’s “table of contents” as implied by the heading structure (like the above list), and the user can jump directly to the desired section.

For example, on a page listing Staff Members, Board Members, and Volunteers, headings allow everyone looking for a particular volunteer to skip the “Staff Members” and “Board Members” sections. That saves time and increases happiness.

Visual Consistency

With a web technology called CSS, web designers can define the style of each heading (e.g. all heading 1s, all heading 2s, etc.) so they look the same on each page. Doing this saves site editors and users time:

• Site editors don’t have to remember that “all heading 3s are Georgia 12px bold.”
• Sighted users can [subconsciously] learn to identify each heading style. This makes it easier to quickly scan multiple pages of a website.

Style must still take a backseat to accessibility, though. I’ve worked with the occasional web editor who uses the wrong heading number because they like a particular heading style. Unfortunately this can result in nonsensical page structures such as:

• Cheeses of the world
  •  Types of Cheeses
  • Cheddar
  • Swiss
    • History of Cheese
  • Famous Historical Cheese Eaters

This would be very confusing for a screen reader user and, as you’ll now read, search engines.

Search Engine Friendly

Search engines use headings as an indicator of what text is most important on a page. Given two otherwise identical pages, the one using headings should appear above the one that doesn’t in search results.

Each lower level of heading has less “weight” with search results, so a keyword appearing in a heading 1 influences search engines more than the same word in a heading 2.

Guidelines for Headings

With these benefits of headings in mind, consider these guidelines when writing headings:

• Make sure an outline made with the page headings makes sense.
• Avoid repeating words, phrases, or names at the beginning of each heading (e.g. “Advantages of WordPress,” “Advantages of Joomla,” etc). This increases the difficulty of scanning because the user has to read the first two identical words before getting new information.
• Make sure to use keywords in headings. This has search advantages and often makes the meaning clearer.

How to Make Headings in WordPress

On many websites, bolded text fills the role of headings. This works for users who can see the text and understand the author’s intent. However, headings must be marked up using specific HTML tags for search engines and screen readers to understand them.

To make a heading in this WordPress text editor:

1. Confirm that you have two rows of editing buttons at the top of the editor. If you don’t, click the last button on the right called “Show/Hide Kitchen Sink.”
2. Select the text that will be a heading.
3. In the dropdown menu on the left of the second row of buttons (that probably says “Format” or “Paragraph”), select the heading you want to use.

Note: In most cases, don’t use heading 1s. Your theme should make the Title field a heading 1 automatically.

Heading Out Into the World Wild Web

The web is a crazy place. There are millions of web pages connected by millions more links. It’s easy for you, your users, and your website’s content to get lost.

Headings make the web a little more manageable. They help search engines display more relevant results, and when users arrive on a new page, they help them find information faster.

So do yourself, your visitors, and the web a favor. Use headings.