如何使整个 <section> 元素的区域可点击？

Question

我正在使用一个代码库，其中有一个在由链接包装的部分元素内呈现的文章列表，如下所示：

<a href="link/to/article">
    <section>
        <h2>Article title</h2>
        <img src="path/to/article/img">
        <p>Short description</p>
    </section>
</a>

部分标签内的内容是标题、图像和简短描述。所有文章预览都以表格/网格状布局呈现。单击某个部分时，文章的全部内容将呈现在新页面中。

这样做的原因是整个部分区域应该是可点击的。由于这个标记对我来说似乎不太语义，我想知道这段代码是否正确，如果不正确，是否有更好的方法使整个部分可点击？

Answer 1

你所做的一切都很好、正确并且效果很好。W3C 甚至指出：

a 元素可以包裹整个段落、列表、表格等，甚至整个部分，只要其中没有交互内容（例如按钮或其他链接）。

他们包括一个与您类似的示例。