Why you should use website header tags

Find out how important header tags are for website usability, what headers are, and how headers are used by search engines.

In newspapers, the headline was and still is the most important part of any article. Front page headlines sell the paper, while each article headline entices the reader to stay longer. The same is true for a website.

Headings are even more important in today's world of information overload, where you need to grab attention within 4 seconds.

What is a header tag?

A header tag is a way of giving structure and context to a web page. They can indirectly influence search rankings by making your content easier to read. Headers can also give keyword rich signals to search engines about the content, helping the page to rank.

Technically speaking, a header tag is an HTML element which tells the web browser on your computer or phone how to display the content. A h1 header tag might look something like this:

<h1>This is the first header</h1>

The header above is the first tag you should have on your page. It is the front page headline giving an idea of what the page is about.

The headings on your web page don't have to be proper HTML headers, as long as the look visually different to your text. But it is best practice to use them for accessibility and navigation.

How to use header tags

Use headers to provide structure

Each header tag should give the reader an idea of the information held in the content below it. Think of header tags as the table of contents in a book, with the content separated into multiple sub-topics. After reading a header, the user should have a good idea about what to expect in the content below it.

Use headers to create a visual break

Most people reading your webpage, don't. Instead, they scan the content looking for keywords and phrases that are relevant to their interests.

Only 16% of your visitors will read everything. Make use of scannable text, using a header tag to break up the copy. This will create sign posts that will help the user decide to stick around to read the content.

After writing your content, read through and identify logical breaks in the copy. Find places where the topic can be split into smaller more easily digestible chunks, and create a sub-header.

Include keywords in header tags

Headings should help give context to search engines, by highlighting keywords and phrases that the page is about. This does not mean that keywords should be forced into every heading. The page should be readable first, and naturally include the keywords you are targeting.

Use header tags to improve accessibility

Clear, properly ordered headings will also improve a webpage's accessibility. Screen readers can read HTML and give the reader the opportunity to evaluate the page quickly before deciding the content is worth reading. Headers can make navigation for visually impaired users, as screen readers can jump between properly tagged headers.

Keep the headers consistent

Maintaining a consistent style across your website not only prevents the site from becoming a mess. It will give users a recognisable pattern that aids navigation.

Try to stick to the same font, and size throughout the article. Also, keep the headers short, and to the point.

Meeting your site visitors expectations means they are happier, and more engaged with your content.

Why are header tags so important?

More often than not, your headers can be made to work much harder for you than they do right now.

Headers need to be attention grabbing. Think about when you look through a newspaper or magazine. You’re casually flicking through the pages, and what makes you stop and read something? The headers.

Without clear, to the point headers about what it is your about to read your customers won’t read it.

Try thinking of it like this.

You’re driving down the road feeling hungry. On the side of the road you see a person holding up a sign that says ‘Pizza’. That’s all it says, nothing else.

You keep driving and see another person advertising another Pizzeria, the person here is holding up a sign that says “Pizza, next left.”

We’re getting there now, but would you turn left? Maybe it’s still not quite enough. So you keep on driving and see another person advertising a third Pizzeria, the sign here says “12” Stone Baked Pizza, £2.99 next left.”

How about now? Tempted? I am!

You can see that by making small changes can give a user (and search engines) clear signals as to what the content is about.

Best practices for header tags

Simple tweaks to your headers can bring significant change to the usability of the page. This improves the user experience, and ultimately can help your website rank on search engines.

• Give each page a unique headline which briefly summarises the topic the page covers, using your primary keywords.
• Use relevant sub headers throughout the page, trying to include keywords relevant to the content below.
• Don't force keywords into headers, readability and user experience should come first.
• Use a consistent style throughout not just the web page but the whole website.
• Make it interesting, and relevant to what the reader might be looking for.