The world of web design is filled with shades of gray—but sometimes, there’s a right way and a wrong way—to do things and one of them is how to use headings properly. Best practices exist for a reason: because they’re B-E-S-T.
Lots of folks don’t know about this one, and I’m happy to sing it from the rooftops because it’s actually one of my biggest soul-crushers: incorrect usage of headings. (Another soul-crusher: using “click here” links.)
I don’t care if you’re a designer, a developer, a content producer or a website owner, you need to be using headings properly. When you create a blog post or a web page…
Headings should be used in sequential order
Here’s how it works:
Each page should start with an <h1> tag (Heading 1). There should only be one <h1> per page. The H1 should define what the page is about—the first thing that introduces your viewer to that particular page. The H1 is generally what shows up in the browser title bar.
Then you can use <h2>, <h3>, <h4>, <h5> and <h6> in sequential order! (There are only 6 heading tags.)
If you start a new section on the page, you can go back to <h2>, then <h3>, <h4>.
But you should not—I repeat, should not!—go from <h2> to <h4> to <h6>!
With headings, you can skip back, but you can’t skip forward.
✔
A-OKAY!
H1 → H2 → H3 → H2 → H3 → H4 → H5 → H4 → H2 → H3🚫
NOT OKAY!
H1 → H3 → H1 → H3 → H5 → H2 → H4 → H6 → H2 → H4Headings should be in size order
In theory, <h1> should be the most prominent heading on your page, size-wise. <h1> is the biggest, and they get smaller and smaller. <h6> is the smallest. (You can override this if you have to, but only if you have a really good reason, k?)
Like I mentioned in care instructions for your new WordPress website, if you go from <h6>, to <h2>, to <h4>, it will make me cry—but also, it can hurt your SEO and accessibility.
Why sequential headings matter
SEO
Google relies on your headings to know what your site is about (and deliver it in search results accordingly). Everything you can do to follow best practices will help your website’s SEO—so if you care about SEO and want it to work for you, use headings correctly!
Accessibility
People using a screen reader rely on your headings to be in the right order. That is how they consume your website. If your headings skip all over the place, your site won’t make any sense. If you want to test website accessibility (and so much more), run your site through a tool like Google Lighthouse.
Aesthetics
Headings, when used sequentially, allow viewers to scan the site with their eyes. It looks good, feels good, and gives them context even if they aren’t reading every word.
Now that you understand how to use headings, and the importance of them, let’s troubleshoot…
Common concerns about how to use headings on your WordPress site
Don’t like the style of your headings when used in sequential order?
Sometimes people will start writing a blog post and realize they don’t like the size or look of Heading 2, so they use Heading 3 or Heading 4. This is a no-no. Hopefully your developer has discussed the heading styles with you ahead of time to make sure they work for your needs. If not, work with your developer to update heading styles in a way that works for you aesthetically to use them properly. If there is one particular section where you don’t like the way a certain heading looks, you can manually override it in WordPress’s Gutenberg editor by adding classes or inline styles.
Have you been using headings improperly for years?
Start using them right, today! If you have the time and energy, go back and update the old ones. You might be able to make a global update that fixes the issue. But even if all the old posts and pages stay the same, move forward on the right foot.
Don’t use headings at all? (And instead, you bold text).
Start using headings! If you have your text broken out, it will help Google understand it, and your viewers and visitors have a better experience.
