Website Headings and Why They Matter

Your website headings are doing real work, whether you've thought about it or not.

As website editors, we know the importance of quickly capturing our audience's attention. Headings are an incredibly impactful, often overlooked, tool we can use to engage your visitor.

Think about the way you find information. It starts with finding a source you trust. Then, going to a page title that indicates it will cover the material you’re looking for. When you land on a page, you quickly scan the first paragraph and the headings on the page to see if it’s likely going to cover the topics you’re seeking.

When this works, it is a win-win for the content provider and the visitor.

For a task that is this important to a web page’s success, are you devoting adequate time to your own headings?

What are headings, and what is heading hierarchy?

Headings describe the structure of your content. They are a page’s outline. Technically, they are delineated by special heading tags like this: <h1>Your Page Title</h1> or <h2>A Section Heading</h2>. These tags are indicators to web crawlers that the words between the tags are important, and also tell your browser to display the heading in a certain way They are not a styling tool you use to make your page look pretty or to highlight pull quotes.

• H1 - Page title
• H2 - Main page sections
• H3 - Subsections, and so on

Heading hierarchy is the order you outline your content in. Headings use order to organize. Headings should always follow a logical order, and should never be skipped. 

H1 → H2 → H3

Imagine you're writing a page for potential students of Iowa State. Proper heading hierarchy might look something like this:

• H1: A Student's Guide to Iowa State
  • H2: Academic Programs
    • H3: Undergraduate
    • H3: Graduate
      • H4: Master's Degrees
      • H4: PhD Programs
  • H2: Student Resources
    • H3: Financial Aid
    • H3: Advising
  • H2: Campus Life
    • H3: Housing
    • H3: Clubs and Organizations

Get help creating headings on your ISU Sites website.

Why headings matter 

Accessibility

We want our content to be accessible to everyone. Frankly, it’s the law. But also, accessible content is caring content. People who are blind or have low vision may use screen readers to interact with your site. Screen readers use headings to allow users to navigate and jump between sections. Skipped or out-of-order headings make pages confusing and sometimes even unusable, like a book with a chapter in the wrong place. No matter how pretty the H4 looks, it should never follow an H2; only an H3 or H2 should follow an H2.

Search engine optimization (SEO)

When search engines send out their crawler bots to find new information, they look for headings to understand what a page is about and how it is organized. Knowing crawlers are scanning them, be strategic about what you actually use to label your content. There is opportunity here to get your content the views or impressions it deserves! 

We’ve talked a lot about how search engines decide which content to present to searchers; if you want more on that, check out our other posts on SEO. 

Scannability

Remember, website success is a battle for visitors’ attention. Most readers skim, and clear headings help them find what they need fast.

That applies to heading hierarchy, too. If someone presented you with a research paper that started with a level 3 heading, jumped to a level 2 heading, and then to a level 4 heading, you’d probably give up on understanding the content. 

Heading dos and don’ts

The IAState Web Theme has a thing or two to say about using headings. Here’s a summary of dos and don’ts pulled from the style guide:

• Only use one H1 Headline per page and always 60 characters or less. 
• Start H1s with the most likely search term used to find the information on the page.
• In the H1 Header text, accurately summarize all information users can expect to find on the remainder of the page.
• Do use headers in proper order based on hierarchy (H2, H3, H4, etc.), and bullets to help support points within a block of copy.
• H2 Headlines should always be 70 characters or less.
• While there is no limit to the number of H2 headers on a page, use them only to summarize information in a distinct subsection of page content.
• Consider using “long-tail” keyword inquiries with multiple words (e.g., “How do I get an official transcript from Iowa State?”) as section headings. More on finding these keywords with keyword research
• Don’t use images with embedded heading text overlay, as these headings can’t be read by screen readers.
• Begin headlines and page titles with the most relevant keywords, e.g., “Dean of Students” rather than “Office of the Dean of Students.”
• The heading labels chosen should be self-explanatory to those with little familiarity with your organization. Use terminology appropriate for those browsing the site.
  • “Graduate medical education” is understood by those graduating from medical school
  • “Medical residency” is better understood by a lay audience 
• Devote 50% of your creative energy to your headlines (they may be the first and only things people read anyway). Put 25% of your energy into the first sentence of each paragraph and photo captions. The remaining 25% is for everything else.

Review your headings

Now, think about the way you create web content for your audiences. A well-organized page can be the difference between an engaged visitor and a quick bounce off your website.

Dedicate time this month to reviewing and optimizing the headings on your most important pages. A page with no or poor headers requires a much heavier lift for your visitors to consume your content.