By Kevin Yank

Heading Headaches: Balancing Semantics and SEO

By Kevin Yank

We here at SitePoint have been doing a bit of search engine optimization around the site. When we consulted the experts in this stuff, some of the advice we received went against rules of “good HTML” that we’d previously been following. It turns out, for many people, the rules have changed.

The core issue that we’ve wrestled with is heading structure — how we use the <h1> to <h6> tags on the site. The last time I wrote about this, I advised that you should never skip heading levels. For example, an <h1> followed by an <h3> skips the <h2> heading level, which is bad. That’s still true — you should avoid having gaps in your heading structure.

Where it’s changed is that search engines like Google seem to reward pages that use a single <h1> tag for the title of the unique content on the page. This raises the question: if you can only have a single <h1> and it comes after elements like your site’s navigation, what tags do you use for the headings that must come before the <h1>?

After wrestling with this issue himself, friend of SitePoint Roger Johansson recently published his own findings. In short, until such time as standards like WAI-ARIA enable us to label page elements like navigation without headings, we must use heading structures that begin with <h2> (instead of <h1>) for “boilerplate” content like navigation menus, headers, footers, and sidebars.

So now, this is okay:

<h2>Site Navigation</h2>
<h1>Content Title</h1>
<h2>Related Links</h2>

The newly minted WCAG 2.0 accessibility standard even blesses this approach in its section on headings, the example for which uses headings in exactly this way.

These things are always changing, and we can expect browser support for standards like HTML5 and WAI-ARIA to again change the rules surrounding heading tags in the next few years. For now I will rest easy using a single <h1> for my content’s title, and letting the <h2>‘s fall where they may.

  • Wardrop

    Personally, I think HTML + Semantics are a bad match, and need to be dropped all together in favour of semantic XML-based micro-formats, or something along those lines. XHTML/HTML in my opinion, should have the sole job of structuring a page into a block hierarchy, and should contain semantics relative only to that particular web page, as specified by the author. The reason for this stance is that the scope of web semantics is too broad to ever be completely covered by a single spec. Most of the semantics built into HTML are a hindrance for most websites, especially web applications. As an example, given the inflexibility of HTML, the document structure of many web pages (such as those belonging to web apps) severely lack semantic structure, instead relying on pre-defined tags like div, span and h1 which are completely un-semantic in the context of most web applications. Custom tags like <product<, <menu<, <customers<, <title<, etc.

    Current semantic implementations are too idealistic, with a supposed assumption that all HTML content is informational, and hence can be structured like an informational document. This was the case at one point in time (when HTTP, HTML and the likes were defined back in the 80’s/90’s), but times have changed rapidly. I just think some of these W3C members need to really take a step back and look at technologies that better accommodate the web of TODAY and the web of TOMORROW which is anyone guess.

  • Pingback: The Hard Facts about Heading Structure()

  • Andy

    Great article. I am working on a number of themes for Drupal and will take this into consideration greatly.

  • Horrible abomination of an idea. For my own sites, I think I’d rather sacrifice a bit of that pointless SEO and keep a good heading structure. The hoops some people jump through for a little extra slice of SEO are ridiculous.

  • i want an official apology from all those purists who told me you ~MUST~ ~ALWAYS~ observe the strict h1-h6 hierarchy

  • Justen

    Semantically it is most logical to put your title at the top of the document. Who reads an article or book only to discover its title halfway through? You are confusing issues of your layout with issues of semantics. A single <h1> makes sense – it is clearly declaring the top level title of the page. Unless there are multiple documents inside a single page, only one top-level heading should be required.

    If your layout requires that the navigation appears before the heading, use an appropriate stylesheet. If that is either too difficult or too obnoxious to accomplish, violate the semantics of the page at your leisure, but don’t call it strictly logical or valid. It’s not necessary to be a purist, but one must recognize what is and is not pure before he can make decisions about one’s level of compliance.

  • robin

    Is it really only me or do these sort of debates sounds to me like the rules of the “thought police”. Why should designers HAVE to use any design principles? Surely I should be free to design a page to look like anything that I want it to look? The issue of headings seems to me to be something straight out of the Écoles de Desin of the 19th century! Design broke free of those conventions long ago and I can see no reason, merit (or right) to re-establish them. Hands off! Rules are made to be brioken in art and design. We want the tools but not edicts on what we should or shouldn’t do with them :)

  • dotherightthing

    @ Justen

    Who reads an article or book only to discover its title halfway through?

    On the other hand, how many books don’t have contents pages or front covers?

    Doesn’t the contents page (which lists the chapters of the book) do the same job as a website’s primary navigation (which lists the sections of the site)?

    And isn’t the front cover (which shows the title of book and some ‘branding’ imagery) comparable to a logo that might sit at the top of every page on the site?

  • okparrothead

    Thanks for this clarification. It’s good to know what the search engines are thinking.

    Thanks r937 for the comment about stylesheets. I’ve been putting navigation at the bottom of the source for a long time so there shouldn’t be any conflict. Navigation is not part of the page content, nor is the footer, they’re part of the Web page which is a different animal.

    Here’s my 2 cents:

    I try to visualize my pages as if I was seeing them in the old MSWord Outline view.

    One <h1> per page makes sense, just like one <title> makes sense with subheads within the content. I will have to change my sites though as I had <h1> as the site name with <h2> being the page title, then on from there.

    What’s in a sidebar is supposed to be supplemental to the content so in my mind these sections don’t rate higher than <h3> which is probably about the right weight for the navigation as well. In the print view, unless they’re really sidebar content and not just ads or navigation, they shouldn’t show at all.

    Rarely do I have content in the main body that needs to be broken down more than <h3>.
    When that happens, the article could be broken into pages, with new structure per page, or multiple articles.

    Thanks again for the clarification. Cheers!

  • My office solved this by using headings only in the content of the document and avoiding them altogether in the navigation menu and sidebars. Not sure how it’ll effect SEO.

  • Erick S.

    But…but…the navigation issue I don’t understand. I mostly use for menu-items and no tags whatsoever?!

    Am I doing this wrong all this time?

    So how about:

    menu option 01
    menu option 02
    menu option 03

    Is this a good way of using a list with H-tags?

  • For me it is VERY SIMPLE. All <h?> tags are for content only. For other headers on your page, like “Site Navigation” use <span> or <p class=””> or whatever.

    The theme of the page should be in the page title, the h1 header, the first paragraph and be repeated as appropriate throughout the page text. Search Engines will then know very clearly what the page is about. Combine with some incoming links if the content is good enough and your page will rank very well.

    <h?> for content only!!!

  • John Pisello

    @Justin is right. There’s no reason a modern web site cannot start with its content at the top of the source code (never mind how the browser will render things–Google only cares about source code ordering). Put your content first in your source code, and follow it with your navigation, headers, footers, right column content, etc. Then use CSS to handle the layout.

  • it wasn’t i who made the remark about stylesheets (but an excellent remark it was)

    the author of each comment is below the comment, not above it, although once you’ve scrolled down past the first couple of comments here, it’s really hard to tell

    this page needs a new stylesheet, eh


  • Good point John Pisello about the author being listed below the comment, not above. I think the little speech triangle thingies coming from the avatar need to be higher contrast.

  • james

    Google seem to reward pages that use a single <h1> tag for the title of the unique content

    Can I ask, based on what research have you made that statement? Very curious.

  • the.peregrine

    Why in the world would anyone use headings as navigation elements? I guess semantic structure just makes sense to me. It’s not some great mystery, after all.

    There are really only two structural possibilities for navigation, as far as I’m concerned: simple tables and lists. Both work very well and are fully accessible, and between them there’s plenty of flexibility for structure and style.

    @John Pisello: It’s true that CSS will order the content properly for visual browsers, but for many of us it is not a good idea to monkey with the structural order. Screen readers and text-only browsers will display content in the order they find it in the HTML source, and they’ll disregard both CSS and scripts. I understand that there are many people who design with no regard for accessibility, but for me and many others it’s required by law. And if it’s well done, the advantages include good SEO and faster page loads.

    @fisherboy: I agree with you completely (so does the W3C). Separate structure from style, period, and it makes life much easier.

  • notnuts

    For those puzzled and/or annoyed:
    heading structures are something very very useful for making the contents of a webpage accessible.
    People using a screen reader for example make extensive use of headings to find out about a page’s structure: if the single sections of the page are labelled via headings, it is thus easy to quickly discover the blocks of content, the “topography”, of the website at hand.

    With regard to the article content:
    I have also seen people in accessibility-savvy circles using a heading level that is not being implemented to structure the main content itself on a site – e.g h6’s – thus making for a consistent heading functionality for page structure labelling.
    IMHO this seems to be a rational approach that can be adapted to each web project’s specific requirements.

  • Lars

    LOL : peregrine’s comment… Dotnuts to the rescue! Never ending discussions we had for ten years. All tour html are belong to us :)

Get the latest in Front-end, once a week, for free.