Обтекание DIV внутри тега привязки или иначе

Question

Предположим, что у меня есть интерактивный комплекс div, который ссылается на другую страницу следующим образом. Это то, что сейчас делается на клике. При щелчке (css: активное состояние) измените цвет фона внутри <a> и переведите его на другую страницу.

Мне интересно, соответствует ли это правилу HTML5 или рассматривается как лучшая практика по сравнению с его упаковкой div и с использованием JavaScript для управления перенаправлением ссылок и изменением цвета фона при щелчке.

Для меня первый подход кажется намного чище и прямолинейным.

Я считаю, что это распространенное проблемное лицо для многих веб-разработчиков, но я не уверен, существует ли для этого существующее решение для лучшей практики.

1) Поддерживать как это

<a href="page1.html"> 
    <div> 
     <!-- complex layout --> 
    </div> 
</a> 

2) Опустим <a> тег и управления цветом фона во время события мыши и перенаправлять с помощью JavaScript

<div id="#redirectLink" data-link="page1.html"> 
    <!-- complex layout --> 
</div> 

Answer 1

HTML5, вы можете обернуть DIV внутри a Aanchor

<a href="page1.html"> 
    <div> 
     <!-- complex layout -- BUT WITHOUT ANCHORS --> 
    </div> 
</a> 

только если внутри <!-- complex layout --> у вас нет другого <a>

В противном случае вы можете сделать:

<div id="#redirectLink" data-link="page1.html"> 
    <!-- complex layout --> 
</div> 

<script> 
    [].forEach.call(document.querySelectorAll("[data-link]"), function(el) { 
     el.addEventListener("click", function(){ 
      window.location.href = el.dataset.link; 
     }, false); 
    }); 
</script> 

или просто:

<div id="#redirectLink" onclick="window.location.href='page1.html';"> 
    <!-- complex layout --> 
</div> 

Answer 2

Ваш первый подход соответствует HTML5 , Теги-теги могут иметь детей, а не больше ссылок.

Is it legal to have children of an anchor tag (<a>) in HTML?