27

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?

2 Answers 2

30

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!

5
  • 1
    Agree with @clairesuzy, I really can't see getting penalized for this (hiding headings). It's not the same as cloaking, but maybe that's just my opinion. You should also consider actually using the headings in a constructive way, maybe styling them to appear small (same size as normal text) or styling them in another way that is un-heading like. Apr 2, 2011 at 13:15
  • 1
    Tested clip rect() on a sandbox site: works flawlessly. Thanks for the suggestion: I'd never heard of it. Apr 2, 2011 at 14:03
  • 1
    "discovered by members of the Drupal community" can you provide the source of where you found this information?
    – ndequeker
    Apr 12, 2012 at 6:06
  • CSS clip is now deprecated, clip-path as a replacement is experimental: developer.mozilla.org/en-US/docs/Web/CSS/clip-path. As a fallback, I'll go with Jon's answer below until a good alternative exists. It seems legit, is cross-browser compatible, and does as intended. Dec 6, 2015 at 18:15
  • What about font-size: 0; padding: 0; margin: 0; ? Seems like does not occupy any space.
    – Edward
    May 20, 2016 at 22:23
1

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;
}
1
  • 1
    Thanks for that. Yes, it can be done that way, but as clairesuzy points out, using the clipproperty has the advantage of being pretty hard to penalise, even if one wanted to. I've been using it for nearly a year now on my site with no resulting SEO issues. Jan 27, 2012 at 6:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.