Étendre la zone cliquable d’un lien à l’élément parent avec jQuery

Pour étendre la surface cliquable d’un lien les CSS sont bien utiles : il suffit d’augmenter le padding de l’ancre concernée. Mais ne serait-il pas judicieux de rendre cliquable l’élément parent d’un lien ? C’est ce que propose Eroan Boyer dans son billet Étendre la portée d’un lien avec Jquery :

<script type="text/javascript">
    $(function(){
        $(".zonecliquable").mouseover(function(){
            $(this).css("cursor","pointer").find("a").css("text-decoration","underline");
        }).mouseout(function(){
        $(this).find("a").css("text-decoration","none");}).click(function(e){
            document.location.href = $(this).find("a").attr("href");
            e.preventDefault();
        });
    });
</script>

Notons toutefois que HTML5 permet à la balise a de contenir d’autres éléments, comme le suggère le W3C Working Draft :

<a href="http://ad.example.com/?adid=1929&amp;pubid=1422">
    <section>
        <h1>Mellblomatic 9000!</h1>
        <p>Turn all your widgets into mellbloms!</p>
        <p>Only $9.99 plus shipping and handling.</p>
    </section>
</a>