HTML5 alternative for nested anchor tags

HTML 5 standards do not allow nesting of hyperlinks, although there are some valid use cases to allow this. So we need to rely on a work-around like this one for now:

HTML


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

CSS

.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;
}

Pen it!


Notice: Theme without comments.php is deprecated since version 3.0.0 with no alternative available. Please include a comments.php template in your theme. in /data/sites/web/bdwmbe/www/wp-includes/functions.php on line 4486

Comments are closed.