可以在導航標簽內使用 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>