How to link a header in a standards-compliant way?

Question

I have a block of HTML that looks like this:

<div id="header">
 <h1>title</h1>
 <h2>subtitle</h2>
</div>

I'm using a CSS technique to hide all that text and replace it with an image. But I want to link the whole block to the homepage. I can't wrap it in <a> because that wouldn't be standards-compliant. So how do I do it?

---

My solution; inspired by New in town

<div id="header"> 
 <h1>title</h1>
 <h2>subtitle</h2>
 <a href="index.html">Home</a>
</div>

#header {
 text-indent: -9999px;
 width: 384px;
 height: 76px;
 background: transparent url(../images/header.png) no-repeat;
 margin: 10px;
 position: relative;
}

#header a {
 display: block;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
}

Answer 1

Overlay a completely transparent image on top of it all that is linked to the homepage?

Answer 2

Put a link element outside of the header divs and make it cover them by using the absolute positioning. Also add a z-index to make sure the link receives user input.

<style>
    a.header
    {
        position: absolute;
        display: block;
        width: 100%;
        height: 100px;
        z-index: 1;
    }
</style>

<div id="header">
        <h1>title</h1>
        <h2>subtitle</h2>
</div>

<a href="homepage" class="header"></a>