Are nested <a> links legal?

Question

I'd like to nest some links inside each other in my website's banner, something like:

<a href="/" class="hero-image">
    <a href="/some-page" class="navigation-button">Some page</a>
    <a href="/some-other-page" class="navigation-button">Some other page</a>
    <a href="/yet-another-page" class="navigation-button">Yet another page</a>
</a>

and have the page-specific inner links show up overlaid on top of the big banner link that returns the user to the site's homepage.

I know that wrapping block content in an <a> is legal in HTML 5, so is this legal too?

Answer 1

Nope.

Two parts of section 4.5.1 The a element in the HTML 5 spec together forbid this:

4.5.1 The a element

Categories:

Flow content.
Phrasing content.
Interactive content.
Palpable content.

...

Content model:

Transparent, but there must be no interactive content descendant.

(emphasis mine).

Since <a> elements cannot contain interactive content, but themselves are interactive content, it follows that an <a> element cannot contain another <a> element.

What's more, this doesn't work in real browsers. If you try out the HTML from the question (fiddle) in a browser, you will observe that the browser makes all four <a> elements siblings, rather than letting the inner ones descend from the outer ones.

Answer 2

Nesting anchor links are not allowed. The reason is posted in another answer to this post.

However, to achieve the link set-up described in the question, you could do something like this:

HTML (adheres to standards)

<nav id="main-container">
    <a href="/" class="hero-image">Link 1</a>
    <div id="overlaying-container">
        <a href="/some-page" class="navigation-button">Link 2</a>
        <a href="/some-other-page" class="navigation-button">Link 3</a>
        <a href="/yet-another-page" class="navigation-button">Link 4</a>
    </div>
</nav>

CSS

#main-container {
    display: flex;
    flex-direction: column;
    height: 100px;
    position: relative;
}

.hero-image {
    height: 100%;
    width: 100%;
}

#overlaying-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 50%;
    display: flex;
}

.navigation-button {
    box-sizing: border-box;
    text-align: center;
    flex: 1;
    height: 50px;
    padding: 10px;
    margin: 5px;
}

DEMO