HTML5 Boilerplate — and ♥ Basics by the way — comes with some usefull CSS classes to hide content in multiple ways depending on your needs: .hidden, .visuallyhidden, .invisible and .ir. Let’s fly over the first classes and then detail the last.

.hidden { display: none !important; visibility: hidden; }

Fig. 1: Hide for both screenreaders and browsers

.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

Fig. 2: Hide only visually, but have it available for screenreaders

.invisible { visibility: hidden; }

Fig. 3: Hide visually and from screenreaders, but maintain layout

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

Fig. 4: For image replacement

CSS Image Replacement

The latter offer a mecanism to hide some text “under the carpet” for displaying an image with a background property instead. It’s cool, but there is an issue when you want display a clickable image, like a logo, for example.

The HTML 4.01 way

<h1 id="site-title" class="ir fn org"> <a class="url home bookmark" href="/" rel="home"><?php bloginfo( 'name' ); ?></a> </h1>

with the CSS:

#site-title { width: 220px; height: 160px; background: url(../img/logo.png) no-repeat; } 

As you can imaginate, there’s no way to click on the site title because the clickable element isn’t displayed.

The HTML5 way

Let’s get rid of this issue with some HTML 5 twirl. Simply make the whole <h1> clickable:

<a class="url home bookmark" href="/" rel="home"> <h1 id="site-title" class="ir fn org"><?php bloginfo( 'name' ); ?></h1> </a>

According to the HTML5 specification…

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)

…the cat’s in the bag =^__^=

Note: This markup isn’t allowed if you planned to use it within an <hgroup> tag.