HTML5 图形元素可以在 nav 标签中使用吗？

Question

我希望更新一个非常旧的 HTML 页面以使用 HTML5 语义元素。该页面包含 30 张图片，每张图片都包含一个标题。图像/标题块然后链接到其他页面。

目前的标记是：

<div id="wrapper">
   <div class="item">
      <a>
         <img/>
         <p></p>
      </a>
   </div>
   <div class="item">
      <a>
         <img/>
         <p></p>
      </a>
   </div>
   <div class="item">
      <a>
         <img/>
         <p></p>
      </a>
   </div>
</div>

这可以看作是一个识别页面，您可以在其中选择看起来最像您感兴趣的项目，并带您了解更多详细信息。

我正在努力确定使用 HTML5 元素的效果。我认为可以说这个内容实际上是一个导航块，即使它是页面上的主要内容？

在这种情况下，这看起来如何？

<nav>
    <a>
       <figure>
           <img/>
           <figcaption></figcaption>
       </figure>
    </a>
    <a>
       <figure>
           <img/>
           <figcaption></figcaption>
       </figure>
    </a>
    <a>
       <figure>
           <img/>
           <figcaption></figcaption>
       </figure>
    </a>
</nav>

这是当前排名很好的页面上的主要内容，所以我希望不要做任何损害它的更改。

Answer 1

是的，他们可以。但是这个特定的用例似乎是对 <nav> 元素的滥用，该元素通常保留用于站点范围的导航和/或页面内导航。并非每个链接列表都应标有<nav>。

“并非所有链接都必须包含在 <nav> 元素中。<nav> 仅用于主要的导航链接块...”

——Mozilla HTML ELement Reference: Nav Element

同样，并非每张图片都应使用<figure> 元素进行标记。使用说明：

“通常<figure> 是图像、插图、图表、代码 sn-p 等，在文档的主要流程中被引用，但可以移动到文档的另一部分或移动到不影响主流程的附录”

——Mozilla HTML Element Reference: Figure Element

请务必记住，几乎所有 HTML 元素都具有语义含义，包括在 HTML5 之前存在的大多数元素。有时，标记内容最符合语义的方式并不使用任何较新的元素。

在您描述的上下文中，页面的主体是带有链接到其他页面的文本的图像列表，使用带有文本和图像的简单链接列表可能最符合语义：

<ul class="list">
  <li class="list-item">
    <a href="#">
      <span>Item 1 Name</span>
      <img src="#" alt="item 1 image description">
    </a>
  </li>
  <li class="list-item">
    <a href="#">
      <span>Item 2 Name</span>
      <img src="#" alt="item 2 image description">
    </a>
  </li>
  <li class="list-item">
    <a href="#">
      <span>Item 3 Name</span>
      <img src="#" alt="item 3 image description">
    </a>
  </li>
</ul>