嵌套HTML5導航和其他語義元素

Question

在HTML中使用<nav>元素時，您應該如何處理包含鏈接以及其他內容的導航元素（例如下面示例中的徽標）？

我發現自己在<nav >元素中包含了所有內容：

<nav>      
  <div class="logo"></div>
  <div class="links">
    <a href>One</a>
    <a href>Two</a>
    <a href>Three</a>
  </div>
</nav>

但是我應該只在<nav>包裝實際的導航元素嗎？ （這種情況下的鏈接）

<div class="nav">      
  <div class="logo"></div>
  <nav>
    <a href>One</a>
    <a href>Two</a>
    <a href>Three</a>
  </nav>
</div>

---

如果它包含額外數據，則同樣適用於某些其他標記，例如<time> ：

<div class="time">
  Article posted: <time>2016-09-16</time>
</div>

VS

<time>
  Article posted: <span>2016-09-16</span>
</time>

---

我不是在談論代碼的可讀性，而是為了爬蟲（SEO）和可訪問性的優勢而優化標記結構。

編輯：徽標只是一個例子。 通常會有更多內容，我只是以徽標為例來簡潔。

Answer 1

HTML元素應該只包含與元素定義匹配的內容（或者與元素的用途相關的內容）。

nav元素用於“鏈接到其他頁面或頁面中的部分”，因此不應包含徽標，除非它是指向主頁的鏈接，或者上下文需要它（例如，參見HTML5中的最后一個示例） spec，顯示nav還可以包含用作鏈接上下文的文本。

如果徽標（或任何其他內容）與nav的內容“切向相關”，則可以使用aside元素。

time元素用於“日期，時間，時區偏移和持續時間”，因此不應包含“發布的文章”標簽。 隨着time ，你標記日期，而不是任何額外的東西。

但是，這個決定並不總是很明確。 考慮可以想象的用例（例如，消費者可以對特定元素的內容做什么）可能會有所幫助，並且可以決定是否通常將該內容用於該目的（主要基於該定義和示例中的內容）。規格）。

Answer 2

正如其他人所提到的，'nav'元素內的項目應該是導航鏈接。 徽標可以點擊回家，因此它可以被視為導航鏈接（雖然這可能不會有點不尋常），而其他元素（例如非鏈接頁面標題，段落文本，日期或其他一些非導航內容） ）無效。

正確使用語義html對於讀取代碼的機器技術非常重要。 這適用於屏幕閱讀器，SEO爬蟲甚至瀏覽器。 正如其他人提到的那樣，時間元素意味着包含機器可讀格式的內容 - 這樣它可以通過簡單的點擊（在某些設備/瀏覽器中）添加到用戶日歷中，也可以作為時間宣布篩選讀者和其他可能利用它的技術的元素。 將非日期/時間內容放在該塊中將禁止該功能。 在其他示例中，打破語義最佳實踐將導致您的應用程序變得不那么容易訪問和/或SEO更少友好。

這是WCAG（Web內容可訪問性指南）所涵蓋的成功標准： WCAG - 使用語義元素標記結構

Answer 3

<nav>包裝器用於指定主要的導航鏈接塊。 它將接受屬於“流內容”類別的任何標記。

規范中沒有任何內容明確禁止在其中放置圖標，但除非徽標是可點擊的鏈接（通常是這樣），否則我建議將其留在導航標簽之外。

Answer 4

我個人認為SEO和可訪問性更好，以保持導航元素的導航內容，即html標簽的期望和使用，即使不是無效的html內部有其他標記。

為了向您提供該方法可能導致某些問題的實際示例，一些網站為不能使用鼠標的用戶提供了使用Tab鍵直接跳到網頁的某些部分的可能性，這要歸功於“跳過導航”隱藏在頁面頂部的鏈接， http：//webaim.org/techniques/skipnav/ 。 在這種情況下，用戶的期望是直接導航菜單項，但是如果有額外的標記，它可能會在到達鏈接之前卡住所有其他元素。

希望這可以幫助