Three weeks ago I published an article on how headings should tell a story and today, I’m going to go deeper into html headings, provide some advice on writing headings, explain how the structure and order of your headings impacts accessibility and provide some tools that you can use to analyze your own headings both from the perspective of structure, best practices and accessibility but also from the perspective of writing engaging content.

What the H??

Oh headings. In the early nineties, h1-5 and p were the first HTML tags I learned. Even before browser styling caught on, armed with an h3 and a blink tag, I could build a fancy schmancy ‘application’ that showed the current time on my VCR. In case you weren’t around then, it would blink 12:00 and in case that doesn’t make sense, please don’t contact me... I feel old enough already.

Headings predate the web and go all the way back to the very early days of printing. Johannes Gutenberg even experimented with headings when he was printing his Bible – he used red ink for certain headings in a process called rubrication. Since this involved sending his pages through the press twice, it was very expensive and was only printed in a select few copies. But the idea that Gutenberg had still works today for modern printing and the web; headings are used to create a hierarchical structure within your content. They are like a table of contents that is printed within your content.

Basic rules for headings

Like everything in the web, headings have a set of rules and best practices that have been developed.

1. Use one primary h1 tag per page

This one is important – your h1 tag should be the title. It is the biggest heading, the most important topic and in most pages, it makes sense if you put an h1 tag around the title. People who use screen readers will expect this because it is semantically correct and screen readers tend to use the semantic value of tags to help users navigate. You’re in even better shape if you only include one h1 tag per page. But even if accessibility is unimportant for your use case, this rule will make it easier for search engines to figure out what you’re talking about.

2. Maintain a logical hierarchy

In html, we have h1 – 6. They should appear in order. A good rule of thumb is:

  • h1 – title
  • h2 – main headings
  • h3 – h6 – subheadings within each main heading

3. Do not skip levels

In other words, follow the order above. If you jump from:

h1 – h3 – h2

that does not maintain a logical hierarchy. It may make it harder for search engines to index your content but it will definitely make it harder for people who use screen readers to learn from your content.

4. Semantics > Style

In my introduction, I told you a story from the web before css was invented. At the time, markup was it and so for some things (like making a 12:00 blink forever like a VCR that didn’t have the time set), using an h tag was the best option if you wanted to work with Mosaic and still support Lynx.

Note to self – these trips down memory lane sure make me feel old. Maybe in the future, I should avoid the VCR references and talking about how I predate css.

But we reached the modern era about thirty years ago so you don’t have to do this now. If you want your text to appear bigger and make sure it always appears on its own line, you should use css now. On the other hand, if it is semantically a heading and describes the structure of the content, you can use an h tag.

5. Be descriptive

This is likely the most important rule of them all. Your headings have to be descriptive. They should be so descriptive that if you are given only a list of headings on a page, you should be able to guess what order they appear in and be able to summarize your article based only upon headings. Siteimp makes this easy, but there are plenty of other tools that you can use to find headings across your entire page.

Back in the day, there was an idea out of search engine optimization that suggested filling your headings with keywords. I don’t really think that impacts rankings nowadays though I’m open to being proven wrong. But, this certainly seems to help Google figure out what a page is about. If we extrapolate the semantic value of headings into a generative AI world, I think the same concept applies. It’s too easy to game what is in your headings so keyword pumping won’t help... but good descriptive headings seem to.

6. Don’t overuse them

HTML gives you access to h1-h6, but few articles need more levels than h3 or h4. Look at headings as being like landmarks when you are giving someone directions. Thirty kilometres of two lane highway is not a landmark, but the giant moose on the side of the highway is a landmark. Make sure your headings are the giant moose, not the thirty km of road.

Headings and accessibility

When I use a screen reader, I use NVDA so commands like H, shift+H and 1 – 6 are a big part of my browsing experience. If you’re not familiar with NVDA, those commands will help you move back and forth through headings or through specific heading levels (ie – 2 = h2). If you have never used a screen reader, I highly recommend that you pick one (NVDA will do) and start using it. Not only is it a great way to make your sites and applications more accessible, but screen readers are underrated tools for editing content. And yes, I did rip off the idea from Siteimp’s heading support article and I’m not even the slightest bit sorry :).

Basically, you open up a page and navigate through headings using the H key. If it makes sense and tells a story, you’re likely going the right direction (unless it’s not the story you want to tell). There is something very powerful about hearing your headings spoken back to you. Between the detached voice and the endless focus on your headings, the experience of listening to your headings spoken back to you is a powerful editing tool.

And as a bonus, the moment you turn off your monitor, only use your keyboard to navigate and listen to your work, you’ll officially be an accessibility advocate. The a11y tattoo is optional. But the moment you have to rely upon your ears and not your eyes, you’ll realize that working with a screen reader is either very pleasant... or impossible. On the pleasant side, there is no eye strain and if you remove the monitor from play, you have a lot more options for an ergonomic setup. On the impossible side, I’m really not sure if it’s harder to use some applications with a screen reader, or win a Fields Medal. On one hand, the Fields Medal is one of the highest honours a mathematician can receive, but as long as you’re under 40 and wicked smart you technically can win a Fields Medal. But there are some applications you cannot use with a screen reader.

On that cheery note, let’s move onto another heading.

Making your headings shine

Writing a heading is a challenge and no matter how long you’ve been doing it, you will end up editing these a lot. In the beginning, I’m a big fan of actually getting an editor. Maybe it’s a human editor or maybe it’s a generative AI editor, but no matter the source, having someone or something you can run your headings by will only help you.

Newspapers are an excellent way to learn about headings, especially weekend editions that print longer, more in depth articles. If you read a well written article, you can literally scan the headlines and find what you are looking for. Try to emulate that when you write your headings.

It is very useful to consider only your headings and to analyze them separately. It is useful to analyze them in both the order they appear and sorted by h1, h2, etc. If you follow this method, your headings will get better at telling a story because you will analyze only the headings, make sure that the order is obvious and make sure that the article is obvious because of the headings. Because if you can mentally skip through your article while looking only at headings, you’ve likely written very good ones.

Concluding words

This has been a really basic look at html headings. Their true purpose and some of the best practices behind their usage are often overlooked, but vital. They are important enough that they deserve to be analyzed separately. If your headings work as writing, they help readers scan, understand, and remember the page. If they work as structure, they help screen readers, search engines, and other tools understand how the page is organized. The best headings do both.