Are nested <a> links legal?

Question

I would like to embed some links inside each other in my website banner, for example:

<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 internal links on the page display the top of a large banner link that returns the user to the website’s home page.

I know that the contents of the packaging block in <a> are legal in HTML 5 , is it just as legal?

Answer 1

Nope.

The two parts of section 4.5.1 The a element in the HTML 5 specification prohibits this:

4.5.1 Element

Categories:

Stream content .
Content phrasing .
Interactive content .
Dominant content .

...

Content Model :

Transparent , but there should be no interactive content descendant .

(a main attention).

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

What else, it does not work in real browsers. If you try the HTML from the question ( fiddle ) in the browser, you will see that the browser does all four <a> elements and does not allow the internal ones to move away from the external.

Answer 2

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

However, to achieve the link setup described in the question, you can 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