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