可以在导航标签内使用 HTML5 图形元素吗？

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 元素参考：Nav 元素

同样，并非每个图像都应该用<figure>元素标记。 使用说明指出：

“通常， <figure>是在文档的主要流程中引用的图像、插图、图表、代码片段等，但可以将其移动到文档的另一部分或附录中，而不会影响主要内容流动”

— Mozilla HTML 元素参考：图形元素

重要的是要记住，几乎所有 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>