Skip to main content

How headings work

Posted in Content

Headings break groups of paragraphs down into manageable and readable sections. Without them, a great article may never be read; each visitor looking at the reams of text ahead of them and deciding that they can’t face reading it… After all, they expected an enjoyable, informative article, not a full-on dissertation!

So it’s useful to think of headers as dividers.

Headings on the web come in various levels. Six levels, to be exact. It’s unlikely you’ll need to use all 6, but it’s good to know they’re there, just in case! Let’s call them h1, h2, h3, h4, h5 and h6.

Anyway, I’d better practice what I preach and break this blurb up a bit!

Heading level one

When writing a blog or a web page, it’s usual that the ‘title’ forms the main heading on the page.

In your content management system, the first heading level usually sits in its own wee box, above the bigger box where you write the page/article itself. Or it may be the first thing you’re required to write in the main box. Either way, it’ll be the first thing on the page.

Heading level two

So your page/article likely has a level 1 heading now, so when it comes to writing the article itself, you’ll won’t be needing another one.

The next level of header you’ll be using is h2. This’ll probably come after some introductory text. Or it may never come at all, if it’s a very short article and there’s not reason for one!

You can have several h2s in an article. These are the main dividers of your content.

Each h2 section can be divided up in to more sections, with—you guessed it!—h3 headings.

Heading level three and beyond

Here are some examples of how your heading structure might look (note they all start with level 1):

  • h1
  • h1 h2
  • h1 h2 h2
  • h1 h2 h3
  • h1 h2 h3 h2 h3
  • h1 h2 h2 h3 h4 h4
  • h1 h2 h3 h4 h3 h4 h2 h3 h4 h4
  • h1 h2 h3 h4 h5 h6

Rules of the road

There’s only one rule: Never skip a heading level!

The main reason you might be tempted to skip a level is style. You might like the style of the next heading level down. Your content is much more important than the cosmetics of your site.

Make your readers’ experience great

Headings are a great way of breaking a document up, making it easier to read and digest. If your readers have a great experience they’ll be more likely to come back time and time again.

Hire me

If you like what you’ve read and think we’d work well together, I’d love to hear from you.

Contact me now

More resources

Here are a couple more resources for you to enjoy. If that’s not enough, have a look at the full list.

  1. Images as the first thing in a button or link

    If the text of an interactive element like a button or link is preceded with an accessible image, we’ve probably got an accessibility problem.

  2. Alt text for CSS generated content

    There’s an interesting feature in Safari 17.4 that allows content added with CSS to have ‘alt’ text. I’m not sure how I feel about this.