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

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

enter image description here

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!

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

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

Solution 3:

Wrap your nested link inside an object tag :

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