将 DIV 包裹在 Anchor 标签或其他标签内

假设我有一个可点击的复合体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>

HTML5, you can wrap a DIV里面一个A anchor https://www.w3.org/TR/html-markup/a.html#a

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

only if inside <!-- complex layout -->你没有另一个<a>或表单动作元素，例如<button> etc.

否则你可以这样做：

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

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

或者简单地：

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

但内联 JavaScript 的设计很糟糕，因为难以维护和调试，所以更喜欢将其放在脚本文件中。