Dave Woods - Freelance Web Design Warwickshire

7 Common Mistakes When Using the HTML Heading Element

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>

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.

Summary

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.

27 comments on “7 Common Mistakes When Using the HTML Heading Element

  1. John Faulds

    I agree with most of your points except the last one which is completely wrong IMO. But I’m prepared to be proved wrong if you can provide some evidence that doing so harms accessibility and results in poorer SE rankings.

  2. Dave Post author

    Hi John, it won’t directly harm your SE rankings in terms of penalising a site but it definitely isn’t the best method for optimising a site. Imagine if you were to structure a page like:

    h1 – main page title
    h2 – navigation
    h2 – newsletter
    h2 – contact details
    h2 – sponsors

    and so on? Headings are one of the strongest elements when used correctly for SEO so why waste all those headings by diluting the weight of these on side boxes throughout a site when they could be used to better effect marking up the content correctly and focusing on the keywords that are being targetted on that page?

  3. maurice

    I think you are completely wrong about 2 and 7. The h1 is the title of the book. The h2 is the chapter title. Also, every element on a page should have semantic meaning.

  4. Rob Maurizi

    Dave- Nice post. I also have to disagree with the last point about marking up non-content-related headings with H*. I don’t understand how this hurts users with screen readers, considering many offer the option to jump to the next heading.

    You argue that that sidebar content should be labeled with semantic-less markup, but I feel that would cause more confusion in non-visual UAs. For example, the user is reading about lions and zebras in Africa, and then the content abruptly changes to some sort of list or promo content that has no bearing on the original content. A heading labeled “secondary navigation” or something would alert the user that they had moved out of the context of the article/post/whatever content and into a new context of secondary navigation content.

  5. Tim Wright

    I’m going to have to agree with Maurice.

    Screen readers can easily navigate by headings, so marking your major sections with a heading can be very helpful.

  6. Dave Post author

    @maurice – divs and spans don’t have semantic meaning, are you suggesting that we should never use them?

    @rob – In the same way that we’re supposed to use a “skip to content” link to avoid repeating navigation would we need one to skip headings as well?

    It’s a tricky one and I completely see your point as without the headings in a side bar it would be difficult for a screen reader to determine where the content ends and where the extra content begins.

    But also, if you had a three column layout with a left navigation before the content and marked up all the headings to any sections in that column it wouldn’t really make semantic sense to have h2’s which would later be followed by an h1 for the main document.

    It’ll be interesting to see how screen readers adapt to HTML5 elements once they’re available to use properly as presumably section, article and nav elements will solve this problem if used correctly (but obviously HTML5 won’t be available for some time yet).

  7. Mike Mella

    Maurice is absolutely right.

    The logo or workmark should be the first heading. It represents the highest level heading: the site heading. What other element is more appropriate to represent the heading of the site?

    Search engines will have no problem indexing each page as different content as long as the rest of the content is marked up properly.

    And every piece of content should indeed have semantic meaning.

    “divs and spans don’t have semantic meaning, are you suggesting that we should never use them?”

    …We should certainly never use them as headings, yes.

    A good practice to tell if you’ve marked up your content correctly is to turn off the style sheet and look at the visual weight of each element. That’s how search engines and screen readers will see them.

  8. Dave Post author

    Hi Mike, thanks for commenting. I take your other point on board but disagree with regards to the logo.

    If you follow this practice then in most cases you’re simply replicating exactly the same as what is being used for the title tag whereas the headings within the page should be used for the actual content and the logo should simply be an img so that it’s displayed for users without CSS.

    I do turn CSS off when building websites to ensure that they work in text only browsers and to ensure that the structure is correct.

    Despite disagreeing on some of these issues, I should have maybe categorised them as major dont’s and the other few that are a bit more subjective as I have seen these few issues argued about by many respected web designer with no real agreeable solution.

  9. Tom

    The website name/logo should not be a h1, unless maybe on the homepage. The h1 is the title of the content, such as a blog post.

    Screenreaders know what site they are by the URL and metadata. You need to see a screenreader in action and sites with more than one h1 mean confusion.

    However, if you site title is a h1 and the blog post title is a h3, it isn’t a disaster and whilst we could debate it until the cows come home, and bore ourselves to death, I do not use h1 for the site name/logo.

    And also, it won’t effect search engines greatly as they are rather clever these days (:P) and know what the url is and the content. Content is King.

  10. John Faulds

    Headings are one of the strongest elements when used correctly for SEO so why waste all those headings by diluting the weight of these on side boxes throughout a site when they could be used to better effect marking up the content correctly and focusing on the keywords that are being targetted on that page?

    Because sometimes the headings in your sidebar (or whatever) do contain keywords and because sometimes it’s just not appropriate to use non-semantic elements (div/span) there instead.

    Take this for an example:

    Main content
    ————
    A specific service
    …content…

    Other services

    Service 2
    Service 3

    Nothing wrong with that right? Now what if the other services is in a sidebar that links to other service pages? Why is it wrong to use heading tags there? You’re not only telling people what the links that follow are, but you could also potentially get a keyword in there too.

  11. Dave Post author

    @John – In that situation, yes I probably would mark it up with headings but would also ensure that within the source code the supplementary content followed on from the main article.

    I’d always markup the actual content with an h1 (despite different arguments against it above) and therefore it wouldn’t make sense to me for anything to preceed that with an h2.

    Point 7 in the article is aimed more at discouraging marking up things like standard left navigation with headings which really don’t need them in my opinion but for extra bits of useful content which follows on from the main article then I’d probably do the same as you suggest 🙂

  12. Michał Czernow

    I agree, that 7th point is fragile.

    If you think about it, it’s a simple consequence of the second point. When we talk about hierarchy, it’s a bit more logical not to mix up headings from main content and side content (which’s not directly related to the first one). So “Lions in Africa” wouldn’t be a good h1 for “Topics about Africa” (e.g. h2 in the side bar). But logo would be a great h1 for every single h* in the whole document. Second point convienced me, but also caused a controversy about seventh point.

    Good article. Presents clean rules about dealing with confusing headings. At some point it seems to be inevitably a matter of choice, but hell, what isn’t :)?

  13. Dave Post author

    Hi Robin, Personally I’d just use an image… that’s what it is after all and will display the same to everyone even if CSS is disabled.

  14. Danny Murphy

    There has been a long running h1 debate over at http://h1debate.com/ it is currently about 70% for main heading and 30% for Logo/site name.

    I have now followed the same route as digg where on the homepage the logo/site name is a H1 and then on every other page the logo/site name is wrapped in a span and the main heading/blog post title becomes the H1

  15. Dave Post author

    Danny, that’s exactly what I’d do. The only thing I’d change is if I was using an img for the logo/site name then there probably wouldn’t be any need for the span to wrap it.

  16. Azad

    Usage of proper headings is a matter of common sense. Use h1 for the heading that describes the page the most. H2 for sections in the page of high importance.

    E.g. Use h2 for blog post titles in the front page but use h1 for the same title in the item-page. That’s something most bloggers don’t do but should.

  17. Tim Wright

    @dave – divs do actually have semantic meaning. They’re used to divide major sections of a page up.

    I think you might be right about spans though

  18. Jennifer

    I also agree on the point of #2 – not using h1 for the logo EVER. It shouldn’t be referred to as “a mistake”. Sometimes, it’s okay.

    To me, one of the most important things on the page is that you are Dave Woods, Freelance Web Designer. It distinguishes you from being Neatly Sliced, front end developer.

    But if you don’t want your content structured that way, hey, don’t do it. I want mine like that. So it’s not right or wrong, it’s how you want your content structured.

  19. Dave Post author

    @Tim – That’s what divs are for but that doesn’t mean that they have semantic meaning.

    @Jennifer – I agree that on the homepage then it does actually make sense to use the site title as the h1 but a different h1 should be used throughout the site to differentiate clearly between content.

    It is more down to personal preference but I don’t see the need to repeat the same h1 as the title element across the whole site?

  20. Pingback: sodevious.net; design and resource blog » Blog Archive » RSS Link Love!

  21. Pingback: links for 2009-04-04 | This Inspires Me

  22. Mike Mella

    Incidentally, to think of the site heading as “just a logo” is a problem in itself. It’s not a logo; it’s the site’s brand. A brand has as much value as any article heading or, I would argue, more.

  23. ldexterldesign

    Thanks for the article; often the grey topic.

    By the looks of what the W3C have to say on the matter it looks at though an appreciation for all page/(website) content is an integral factor in weighting the content for search/accessibility: http://dev.w3.org/html5/spec/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements

    Hopefully the HTML5 heading/sectioning outline algorithm helps clear this up in the future. It’s obviously something that needed addressing.

    Cheers,