html - 如何使整个 元素的区域可点击？

Question

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

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

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

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

Answer 1

您所做的一切都很好、正确并且运作良好。 The W3C even states :

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

它们包含一个与您的示例类似的示例。