Html 如何构成一个整体<；第节>；元素'；什么地方可以点击？

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

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

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

---

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

您可以使用JQuery来实现这一点……无需使用链接标记

文章标题
简短描述

$（文档）.ready（函数（）{
$（“#可单击的_部分”）。单击（函数（）{
//做点什么。。。。
//继续执行某些操作，例如将用户重定向到新页面
});
});

拥有一个这样的锚是相当困难的。这样做可能更好：

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

html:

<section data-link="https://www.google.com">
  <h2>article title</h2>
  <img src="path/to/article/img">
  <p>Short description</p>
</section>

javascript（jQuery）：

---

你所做的一切都很好、正确，而且效果很好

元素可以围绕整个段落、列表、表格， 以此类推，即使是整个部分，只要没有交互 内的内容（例如按钮或其他链接）

---

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

一点也不含糊，并且是当前HTML5标准所允许的。尽管使用Javascript捕捉整个部分上的点击事件不是一个坏主意，但它永远不应该取代一个（至少）链接到同一目标的锚元素。

$('section').on('click', function(e){
  e.preventDefault();
  window.location.href=$(this).data('link');
})