Skip to main content

Heading Headaches: Balancing Semantics and SEO

By Kevin Yank

Programming

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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.

Kevin Yank is an accomplished web developer, speaker, trainer and author of Build Your Own Database Driven Website Using PHP & MySQL and Co-Author of Simply JavaScript and Everything You Know About CSS is Wrong! Kevin loves to share his wealth of knowledge and it didn't stop at books, he's also the course instructor to 3 online courses in web development. Currently Kevin is the Director of Front End Engineering at Culture Amp.

New books out now!

Get practical advice to start your career in programming!


Master complex transitions, transformations and animations in CSS!