How to nest links

When you create your web interfaces, sometimes you need to embed links in each other, for example for movie cards, but it is not possible to do it directly in HTML because the specifications do not allow it.

HTML Standard ; 4.5.1 : The a element

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

If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents.

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.

The target, download, ping, rel, hreflang, type, and referrerpolicy attributes must be omitted if the href attribute is not present.

If the itemprop attribute is specified on an a element, then the href attribute must also be specified.

Example of invalid code:

<a href="#link1" class="movie-card">
    <h1>Movie Title</h1>
    <p>Movie description...</p>
    <ul class="list">
        <li>
            <a href="#link2">Link n°2</a>
        </li>
        <li>
            <a href="#link2">Link n°2</a>
        </li>
        <li>
            <a href="#link2">Link n°2</a>
        </li>
    </ul>
</a>

So, I propose you a small trick to circumvent and give a viable solution for all browsers. We will use the absolute and relative property to display a clickable element that will take the whole space.

Valid code :

<a href="#my-link">
    Title
    <span aria-hidden="true" class="p-absolute">
</a>

<style>
.p-absolute {
    position: absolute;
    inset: 0;
}
</style>

With the previous code, this gives :

HTML

<article class="movie">
    <h1>
        <a href="#lien1">
            Movie Title
            <span aria-hidden="true" class="p-absolute"></span>
        </a>
    </h1>
    <p>Movie description...</p>
    <ul class="list">
        <li>
            <a href="#link-2">Link n°2</a>
        </li>
        <li>
            <a href="#link-2">Link n°2</a>
        </li>
        <li>
            <a href="#link-2">Link n°2</a>
        </li>
    </ul>
</a>

CSS

.movie {
    position: relative;
}

.p-absolute {
    position: absolute;
    inset: 0;
}

.list a {
    position: relative;
}

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

Enjoy =)