The heading element is an important part of any HTML document but is misused in a lot of websites. When used correctly it adds semantic meaning, helps with accessibility and can boost your search engine rankings however when used wrongly it can cause problems for your users and search engine rankings. This article explains how heading tags are often misused and how this can be put right.
1. Using Multiple h1′s on the same page
The <h1> tag should be used to markup your heading for the current page and should come at the top of your main piece of content. If you have a document which contains information about Lions in Africa then it would make sense to use your h1 with that text within the element:
<h1>Lions in Africa</h1>
If you then had another piece of content which went into detail about Zebras in Africa then you should have a separate document with that text as the <h1>
In a situation where you’re only briefly touching on each subject and there wouldn’t be enough content to justify breaking it into separate pages then it would make more sense to have a document structure like this:
<h1>Wildlife in Africa</h1>
<h2>Lions in Africa</h2>
<p>Content about lions in africa</p>
<h2>Zebras in Africa</h2>
<p>Content about zebras in Africa</p>
2. Using the same h1 on every page
Quite often you’ll see websites markup their logo or site title with an <h1> tag. In fact the wordpress theme I’m using for this very blog also makes that mistake (I’m in the process of building a bespoke one which uses headings correctly).The problem with this is that it doesn’t offer users or search engines anything unique as the main heading and would be the same as marking each chapter in a book with the book title rather than something easy to differentiate between each page of the site.
A logo or site title should not be used as the main h1 as this should be reserved for the heading for the actual content but this is a mistake I see regularly and can easily be fixed by ensuring the h1 element is only used to markup the beginning of the main content.
3. Using the heading tag because it matches the font size
This is a common mistake for newbies to web design but is something that I still see from time to time. Web designers who don’t understand CSS properly will sometimes avoid using a particular heading because it doesn’t match the appearance that they’re looking for in their design. Quite often this will be because an h1 is too big for what they want so they might use an h2 or h3.
However, by using CSS it’s easy to style the headings to look however we want so the font size should never be considered when deciding which is the correct heading to use. Which moves us on to the next point nicely…
4. Not using a heading structure
Headings should all follow a clear structure so, an h2 should follow an h1 , an h3 should follow an h2 and so on. This is closely linked to the previous point as I’m sure that this is misused most when people forget that they can easily change the size of the heading with CSS.
For example, the following is a good heading structure:
- <h1>Wildlife in Africa</h1>
- <h2>Lions in Africa</h2>
- <h3>A Lions Diet</h3>
- <h3>Lions Characteristics</h3>
- <h2>Zebras in Africa</h2>
- <h3>A Zebras Diet</h3>
- <h3>Zebra Characteristics</h3>
- <h2>Lions in Africa</h2>
As you can see from the above example, each subheading follows on from the previous heading. I find it useful to imagine the heading structure in the same way as you would a contents page in a book.
5. Not using heading tags at all
I’ve also seen the opposite happen on webpages, whereby instead of a web developer misusing the heading tags, they simply don’t include any at all.
This is quite often the case when a web designer doesn’t understand the purpose of the heading element but this is an easy problem to fix. All content should be headed up with an h1 tag so adding that to the beginning of the content is a great start.
I’d then also look to break the content into sections. Good content usually follows a theme and explains one point before moving on to the next so if possible I’d always try to introduce h2′s as a minimum and quite often h3′s. For long blocks of content I’d also look to break this down further with h4′s and so on but in most cases it isn’t usually required so whatever suits your content best.
6. Using the heading tag for non-heading content
I’ve seen this used on different occasions, sometimes by accident where newbie’s use it for making content bold or because it matches the style they’re after but I’ve also seen this where designers are deliberately trying to trick search engines into using the words placed within the heading element to rank their page.
The heading tag does help to rank web pages and is one of the main things on a web page that you can use to add emphasis to keywords and phrases. However trying to manipulate the search engines in this way will only have a negative impact as they’ll either dish out a penalty for over abusive sites or the web page in question will be diluting their heading tags so much that it won’t actually achieve it’s objective anyway.
It’s much more beneficial to use heading tags for what they were meant for and to ensure that clear and concise text is used which uses the keyword and phrases that are being targetted within the search engines than over using the tags in places that they weren’t meant to be used.
7. Marking up side boxes and navigation with headings
Headings should only be used to markup content on a page but are often misused to place headings on side boxes and navigation. This leads to the same headings being used across multiple pagesin every instance where these components are used. Not only does this make the content less accessible for things like screen readers but will the website won’t be making the best use of heading elements for search engines and therefore rankings will be suffering as a result.
To fix this problem, simply use the heading tags for the main content on the page and use none semantic elements (<span> and <div>) for marking up content that doesn’t require semantic meaning.
Once you understand how headings should be used to give proper structure and semantic meaning to an HTML document it comes as second nature to use them correctly.
Do you follow these principles? Do you disagree with any of the above points? Please feel free to comment below.