Tutoriel CSS & HTML : Imbriquer des liens

Dans cette vidéo je vous propose de partager une petite astuce pour imbriquer des liens.

Problème

Dans certaines situations on a besoin de créer une carte cliquable qui contient des liens internes. Malheureusement il n'est pas possible d'imbriquer des liens en HTML car les spécifications sont plutôt claires.

Transparent, but there must be no interactive content descendant, a element descendant, or descendant with the tabindex attribute specified.

Ce code n'est donc pas valide :

<a href="#lien1" class="card">
    <h1>Titre de la carte</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    <ul class="list">
        <li>
            <a href="#lien2">Lien 2</a>
        </li>
        <li>
            <a href="#lien2">Lien 2</a>
        </li>
        <li>
            <a href="#lien2">Lien 2</a>
        </li>
    </ul>
</a>

Solution

La solution est d'utiliser les positions absolute et relative pour créer un élément cliquable qui prendra la totalité de l'espace. Notre lien aura maintenant cette structure :

<a href="#lien">
    Text original
    <span aria-hidden="true" class="absolute">
</a>
<style>
.absolute {
    position: absolute;
    inset: 0;
}
</style>

Si on reprend la structure précédente elle ressemblera à ça

<article class="card">
    <h1>
        <a href="#lien1">
            Titre de la carte
            <span aria-hidden="true" class="absolute"></span>
        </a>
    </h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    <ul class="list">
        <li>
            <a href="#lien2">Lien 2</a>
        </li>
        <li>
            <a href="#lien2">Lien 2</a>
        </li>
        <li>
            <a href="#lien2">Lien 2</a>
        </li>
    </ul>
</a>

Avec le CSS suivant

.card{
    position: relative; /* Servira à délimiter le lien */
}
.absolute {
    position: absolute;
    inset: 0;
}
.list a {
    position: relative; /* Pour que les liens passent au dessus de la span */
}

Pour les liens internes vous pouvez aussi utiliser la technique de la <span> mais pour éviter de complexifier la structure HTML la position relative suffit ici. Il est aussi possible d'utiliser des pseudo éléments ::before ou ::after à la place des <span>.