将DIV包装在Anchor标签内或其他位置

Question

假设我有一个可点击的复杂div元素结构，它链接到另一个页面，如下所示。 这是目前正在点击的事情。 单击（css：活动状态）更改<a>标签内的背景颜色并重定向到其他页面。

我想知道这是否符合HTML5验证或者考虑作为最佳实践，与使用div包装并使用JavaScript管理链接重定向和点击背景颜色更改相比。

对我而言，第一种方法似乎更清洁，更直接。

我相信这是许多Web开发人员面临的常见问题，但我不确定是否存在现有的最佳实践解决方案。

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 锚点中

<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。 a-tags可以有孩子，只是没有更多的链接。

在HTML中拥有锚标记（<a>）的子项是否合法？