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. It’s good to make mistakes

    As a designer and developer I’ve made countless mistakes, but that’s part of the reason I’m good at what I do.

  2. Focus appearance explained

    There’s some great stuff coming up in WCAG 2.2, but there’s one rule that’s particularly difficult to understand, so here it is in a bit more detail.