html5: titles in sectioning elements - document outline and SEO implications

Question

The html5 spec says that:

The outline for a sectioning content element or a sectioning root element consists of a list of one or more potentially nested sections. A section is a container that corresponds to some nodes in the original DOM tree. Each section can have one heading associated with it, and can contain any number of further nested sections. The algorithm for the outline also associates each node in the DOM tree with a particular section and potentially a heading.

and the same reasoning seems applied to the html5 document outline algorithm.

I've been checking my site's outline using the HTML5 outliner (h5o) [link] tool but am having difficulty achieving a clear outline that isn't overburdened with useless titles, because of the fact that elements such as <nav> or <footer> will appear in your outline but will do so as 'untitled' unless you give them an explicit h1-h6 heading.

This seems frankly overkill for things like navigation or footers.

One solution is to replace these elements with divs, but that seems to defeat the whole purpose of using html5.

Another, which I've tentatively tried on my site [link], is to set headings for all sectioning elements and then use CSS to hide the headings for some of them (again, basically <nav> and <footer>, as well as some <section> elements. Here's an example:

<nav id="content-nav">     <h2 class="hidden">Post navigation</h2>     <ul>         <li class="alignleft"><?php next_post_link('&#8592; <strong>Next Post</strong><br />%link') ?></li>         <li class="alignright"><?php previous_post_link('<strong>Previous Post</strong> &#8594;<br />%link') ?></li>     </ul> </nav> 

This results in a nicely-diplaying site, but the issue I see with it is Google ranking. In its Webmasters Tool help item [link] on 'hidden text and links', Google clearly states that:

Hiding text or links in your content can cause your site to be perceived as untrustworthy since it presents information to search engines differently than to visitors. Text (such as excessive keywords) can be hidden in several ways, including: […] Using CSS to hide text…

Some people might feel that whether Google likes the fact they use hidden text or not is immaterial, but most of my visitors come from Google searches and I'd rather not be penalized as a result of choosing to go with this setup.

Can anyone offer advice on the subject?

Answer 1

Another, which I've tentatively tried on my site, is to set headings for all sectioning elements and then use CSS to hide the headings for some of theme (again, basically <nav> and <footer>, as well as some <section> elements.

That is exactly the way I would do it, haven't actually had to build an HTML5 site yet, but funnily enough I looked into this a while back.

"headings" or section titles, are great for creating the structure or document outline (as shown on the outliner). They are also very useful for Assisted Technology users, who can basically find their way around a site by "tabbing" through headers without having to "listen to" everything to and try to figure out where you might have put e.g. your search box.

That is the reason why I see that headings/titles should be there, even though they're hidden from visual users view (and stuff the SE's ;))

Not all CSS hiding methods are equal

OK so I know we can't write off the SE's so the way you choose to hide the headers is then important, as you want them to be available to the AT (Assisted technology) users.. display: none; is not reliable (some screen readers don't read them) and you can't "tab" find them either - visibility: hidden; won't remove the space and you still can't "tab" find

So which hiding method?

.. there happens to be a really cool one, discovered by members of the Drupal community.. using the clip: rect(); property which keeps everyone happy

.my-hidden-element {   position: absolute;   clip: rect(1px 1px 1px 1px); /* IE6 & 7 */   clip: rect(1px, 1px, 1px, 1px); } 

As for Google, not only would it be hard for them to "blanket ban/penalise" based on the clip property, even if do start to raise flags, I think it's like everything else if you can prove a legitimate usage for hiding an element - there should be no problem.. and in fact in this case the extra headers should theoretically help them "find structure" too - so I really feel this is not the biggest worry..

My Thoughts

I absolutely think we should title sections as per the HTML5 recs, it's more semantic than any code element or class name, but I also 100% think that we should be able to hide them from visual viewers as there is no point in showing the title "Search this Site" if your visual users can see there's a search box there ;) - that title is only useful to non-visual users and SE's to help them locate areas of the document.. in theory that should help SE's/Google dismiss that area e.g. they shouldn't need to index a search box.. so they're going to have to get to work on their AI, don't you think ;)

My feeling would be to go with this and be clear about why you're doing so, then if your site is by any chance flagged (which I would think would be highly unlikely and would be a manual review anyway) you can explain quite clearly why you're doing it.. As long as those hidden titles aren't "spammy" then I think it will fall into the same category as "image replacement"

+1 Great Question!

Answer 2

My preferred way of dealing with it. With styles disabled, you see the heading, but it's a small heading, not an h1.

<nav> <h6 class="hidden">Navigation</h6> <ul> <li><a href="www.ronpaul.com">Ron Paul 2012</a></li> 

.hidden{    position:absolute;    left:-9999px; } 

OR

.hidden{    text-indent:-9999px; }