Comment lier un en-tête d'une manière conforme aux normes?

Question

J'ai un bloc de HTML qui ressemble à ceci:

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

J'utilise une technique CSS pour cacher tout ce texte et le remplacer par une image. Mais je veux relier le bloc entier à la page d'accueil. Je ne peux pas l'envelopper dans <a> parce que ne serait pas conforme aux normes. Alors, comment puis-je faire?

---

Ma solution; inspiré par Nouveau en ville

<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

Mettre un élément de liaison en dehors des divs d'en-tête et en font les couvrir en utilisant le positionnement absolu. Ajoutez également un z-index pour vous assurer que le lien reçoit l'entrée d'utilisateur.

<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>

Answer 2

Superposer une image complètement transparente sur le dessus de celui-ci tout ce qui est lié à la page d'accueil?