CSS & HTML Video Tutorial: Embedding Links

In this video I propose to share a little trick to embed links.

Problem

In some situations we need to create a clickable map that contains internal links. Unfortunately it is not possible to embed links in HTML because the specifications are quite clear.

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

This code is therefore not valid:

<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

The solution is to use the positions absolute and relative to create a clickable element that will take up the entire space. Our link will now have this structure:

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

If we take the previous structure it will look like this

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

With the following CSS

.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 */
}

For internal links you can also use the technique of <span> but to avoid complicating the HTML structure, the relative position suffices here. It is also possible to use pseudo elements ::before Where ::after instead of <span>.