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:


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


.block {

.block .overlay {
  left:0; top:0; bottom:0; right:0;

.block .inner {
  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.