Are you allowed to nest a link inside of a link?

Question

This may seem pretty basic, are you allowed to put a link inside of a link? See attached image below:

I'm trying to have the whole grey bar clickable to go somewhere, but if the user clicks the wheel or the move arrow, they are other links. See my current code:

<a href="#" class="sp_mngt_bar">     <h1><?php echo $v; ?></h1>     <a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a>     <a href="#" class="t_icons t_icons_move sp_mngt_move"></a> </a> 

Is this a good practice? Am I doing it wrong? How would you do this? Thanks for the help!

Answer 1

Straight from the W3C for HTML4:

12.2.2 Nested links are illegal

Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.

Since the DTD defines the LINK element to be empty, LINK elements may not be nested either.

HTML 5

And for HTML5 it is a little different.

You cannot have Interactive Content inside an A element. Interactive Content includes anchor tags.

Answer 2

To simply answer the question: No.

That being said, here's a pure html/css workaround:

https://codepen.io/pwkip/pen/oGMZjb

.block {   position:relative; }  .block .overlay {   position:absolute;   left:0; top:0; bottom:0; right:0; }  .block .inner {   position:relative;   pointer-events: none;   z-index: 1; }  .block .inner a {   pointer-events: all; }

<div class="block">   <a class="overlay" href="#overlay-link"></a>   <div class="inner">     This entire box is a hyperlink. (Kind of)<br><br><br><br>     <a href="#inner-link">I'm a W3C compliant hyperlink inside that box</a>   </div> </div>