Heading in the Right Direction: What are HTML Headings and Why Do They Matter?

When you are in the process of building a website – whether you’ve hired a designer or you’re building it yourself – there are a lot of pieces to the website-building process you’ll need to consider. Two of the biggest pieces are content (the words that will go on the page) and imagery (photos, illustrations, etc.).

In this post, I’m diving into the content piece and why throwing a big chunk of text on each page or blog post is not ideal.

Make Your Content Work For You, Not Against You

You may have heard of search engine optimization (SEO) already – otherwise known as the art of getting your website to perform better and rank higher on search engines so you can generate more quality leads and organic traffic.

Perhaps you’ve even masterfully sprinkled some locally-targeted keywords throughout your website text.

But are you forgetting about a core element of SEO and web development?

Drumroll, please…headings! (Confetti pop)

Headings can significantly impact everything from SEO to accessibility to readability, so let’s explore what they’re really all about, shall we?

What are HTML Heading Tags?

HTML heading tags, individually called H1, H2, H3, H4, H5, and H6, are a way to segment information on your web pages, posts, products, and events…and really any form of written online content.

Pssst…that includes those important email marketing emails, too.

As you’ll notice in this blog post, I’ve broken down the information into relevant sections, separating each with its own heading. Headings highlight important information in your content and provide a solid structure for your reader to easily navigate the page or post.

We’ll learn how to use them in a bit, but for now, let’s dive into what makes them an essential part of web design and development.

Why is it so Important to Use Proper HTML Headings?

As a website design and development nerd, I am not even a little embarrassed to admit that I am totally obsessed with headings.

Ok, I get it if you think that sounds a little, ummm…unique! 😉

Let me explain why headings are so awesome and fundamental to the success of your written content.

1. Visual Impact

Did you know that 73% of readers online will only scan online content? This means your heading tags are doing most of the heavy lifting when it comes to your website or blog post, especially on longer, more complex pages.

Visually, looking at a big wall of text with zero structure is incredibly overwhelming for readers and will likely result in them abandoning the page before they even bother to tackle the mountain that lies before them.

Separating the content into digestible chunks makes it easier for the reader to process the information. It also makes it significantly more appealing to look at by providing a little break to the eye. (Who doesn’t love a little break, honestly?)

2. Boost SEO

HTML headings are a significant contributor to SEO. As well as making your content more visually appealing and approachable to your readers, headings play a key role in getting your content to rank higher on search engines.

The more relevant headings your text contains that clearly indicate what your content is about, the more Google and other search engines are able to easily recognize and categorize your website, sending it up the ranks on search results.

3. Content Accessibility

Ok, so it might not be the first thing you think of when you’re writing web copy or a blog post; however, it’s essential that you consider the accessibility of your content before you publish it online.

While many of us take it for granted, not everyone is able to read or interpret written content, creating a barrier to accessing important information.

Many people who are visually impaired, dyslexic, or have difficulty reading for other reasons use assistive technology to read online text aloud to them.

For these technologies to work, content needs to be clearly structured and easy to follow. This means that the more headings you include in your text (appropriately placed, of course), the more inclusive and accessible your content is to everyone, and we are absolutely here for that.

How to Use Heading Tags Correctly

Now that we’ve established why using headings with proper content structure on your website is essential, let’s learn how to implement proper heading structure.

Each HTML heading has a specific job in terms of laying out your content, creating a clear page structure for screen readers, and communicating with search engines for technical SEO.

You can use heading tags like this:

• H1: Main heading or title of the page/post/product/event
• H2: Subheading
• H3: Category or subsection of the H2
• H4: Further point or sometimes used as heading of a bulleted list
• H5 and H6: Use if needed to add more subsections

Hierarchy Matters

While you might think each section on your web page needs its own H1 heading to showcase the section’s importance, that is not the case.

Each page or blog post should contain only one H1 heading at the top of the page.

Then, you’re free to use other subheadings, such as H2s and H3s, when and where you need them. If the content doesn’t require subheadings, it’s ok to leave them out. It’s better to have an H1 and no other headings than to add in a bunch of headings used in the wrong order or used unnecessarily.

You do not typically need to use H4s, H5s, and H6s. But hey, it’s nice to know you’ve got options, right?

If you are using those additional heading tags, make sure you use them appropriately and in the correct order to avoid confusing users or search engines, or coming across as spammy in your content. Meaning, don’t use an H1, then an H4, then an H2.

You’ll see in the example below that there appears to be some “skipping” of headings (i.e. H2, then H3, then H4, then back to H3). The headings are still in proper order, though. The H3 and H4 subheadings are repeated as they present similarly grouped information. This may seem confusing now, but when you see the example below, it will all be crystal clear. 😉

Size Matters

The H1 should always be the largest text on the page. Then, as you start to use H2, H3, H4, and so on, the text should gradually get smaller.

For example, your H1 might be 40 pixels (px), then your H2 is 35px, the H3 is 30px, and the H4 is 25px. Just as you don’t want to skip headings (i.e. H1, then H4, then H2), you want to gradually go down in size starting with H1 as the largest and H6 as the smallest (so, don’t make your H1 40px, then your H2 25px, then your H3 35px).

Typically, by default, H5 and H6 are smaller than paragraph text, and that can seem a little confusing (technically and visually). To keep things simple, you could either (1) never use H5 or H6 (those are rarely used anyway) or (2) make your H5 and H6 slightly larger than your paragraph text so you don’t have a heading that is smaller and less important than paragraph text (because that would be a little…well…weird). I wouldn’t stress about the H5 and H6 too much since they are so rarely used or needed.

An Example of Proper Heading and Subheading Structure

It’s all well and good explaining what heading levels are and describing how to use them, but you know what always works great? A visual example!

Let’s demonstrate how HTML headings look and flow so you can get a feel for each one on the page.

I’ve indicated the type of heading used in the examples below to make it super straightforward for you, but in general, you should be able to spot them as the font size of each heading decreases as you go down the list.

Let’s use desserts as our example…yum!

Paragraph text introducing the reader to the web page/post and painting a mouth-watering picture of what’s in store for them.

Delicious Cakes (Example of an H2)

Paragraph text detailing the yumminess of the cakes, how simple they are to make at home, etc.

Paragraph text.

• Bulleted list item
• Bulleted list item
• Bulleted list item

Paragraph text.

• Bulleted list item
• Bulleted list item
• Bulleted list item

Paragraph text.

• Bulleted list item
• Bulleted list item
• Bulleted list item

Unleash the True Potential of Your Website with Proper HTML Heading Structure

And breathe…

That was a lot of information, but you made it through!

And when it’s all separated clearly and logically with the help of a good heading structure, it really isn’t so bad, is it?

Would you like some support in the HTML heading department to ensure your pages and posts are in tip-top shape? I’m always happy to help make your business dreams a reality through awesome websites that perform, rank high on search engines, and appeal to your target audience.

Whenever you need me, I’m just a message away. Get in touch today, and let’s create the best possible version of your business together.