多个导航元素的 HTML5 语义？

Question

我正在学习 HTML5，并获得了一个将 CSS Zen Gardens 转换为 HTML5 语义版本的项目。我已经能够轻松转换其中的大部分内容，但是底部的链接/导航给我带来了一些问题。
转换/处理多个导航的最佳方式是什么？

<div id="linkList2">
     <div id="lselect">
          <h3 class="select"><span>Select a Design:</span></h3>
          <ul>
          <!-- Links -->
          </ul>
     </div>
     <div id="larchives">
          <h3 class="archives"><span>Archives:</span></h3>
          <ul>
          <!-- Links -->
          </ul>
     </div>
     <div id="lresources">
          <h3 class="resources"><span>Resources:</span></h3>
          <ul>
          <!-- Links -->
          </ul>
     </div>
</div>

目前我在认为 linkList2 应该是一个部分，每个子 div 元素应该是导航元素，或者 linkList2 应该是一个导航，子 div 元素是部分之间纠结。

Answer 1

您应该使用<nav> HTML5 元素，因为这不仅是您想要的最符合语义的元素，而且它还允许使用屏幕阅读器的人使用地标导航页面（<nav> 将对应于 @ 987654325@地标）。

现在，如果您网站的多个区域带有链接（例如：主导航和辅助导航），您应该确保正确标记不同的 <nav> 元素。这使得屏幕阅读器能够正确地宣布地标（例如：“Primary, navigation”、“Secondary, navigation”），而不是一般地宣布​​所有内容为“navigation” )，这可能会造成混淆。

要标记<nav> 元素，您可以执行以下操作之一：

选项 1：屏幕上没有可见文本

使用aria-label 为元素提供替代文本。

<nav aria-label=’primary’>
  <ul>
    ...List on links here...
  </ul>
</nav>
<nav aria-label=’secondary’>
  <ul>
    ...List on links here...
  </ul>
</nav>

选项 2：屏幕上的可见文本

如果屏幕上有可以识别区域的文字（例如：“相关内容”），您可以使用aria-labelledby。

<nav aria-label="Site Menu">
  <ul>
    ...List on links here...
  </ul>
</nav>
<article>
  <h1>Title</h1>
  ...
  <nav aria-labelledby="id-1">
    <h2 id="id-1">
      Related Content
    </h2>
    <ul>
      ...List on links here...
    </ul>
  </nav>
</article>

这里有一些资源可以进一步解释这一点：

• Multiple Navigation Landmarks
• aria-label

Answer 2

如果您将linkList2 设为section，那么您的语义是“这里是此部分的导航”。请注意，nav 已经是 sectioning content，因此将其包装在 section 中会有些多余。

还要注意the spec 说：

并非页面上的所有链接组都需要在导航元素中—— 元素主要用于由主要组成的部分 导航块。

没有必要仅仅为了它而将每组链接都放在nav 中。我认为您将linkList2 制作为nav 的方法是最好的，尽管我不会太担心制作子元素section：

<nav id="linkList2">
     <div id="lselect">
          <h1 class="select"><span>Select a Design:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </div>
     <div id="larchives">
          <h1 class="archives"><span>Archives:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </div>
     <div id="lresources">
          <h1 class="resources"><span>Resources:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </div>
</nav>

正如我上面提到的，nav 是对内容进行分段，所以所有标题都应该是 h1，因为它们都是各自部分中的最高级别标题（我在上面已经更改了它们）。但是，我认为，从实际可访问性的角度来看，如果标记中前面有 h2 和 h1 标题，则将它们保留为 h3 仍然是允许的。

另一种很好的方法是：

<div id="linkList2">
     <nav id="lselect">
          <h1 class="select"><span>Select a Design:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </nav>
     <nav id="larchives">
          <h1 class="archives"><span>Archives:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </nav>
     <nav id="lresources">
          <h1 class="resources"><span>Resources:</span></h1>
          <ul>
          <!-- Links -->
          </ul>
     </nav>
</div>

正如我之前提到的，不要用section（或article）包裹，nav 就足够了。

最后一点，因为您的问题是关于语义的。我知道您正在处理 CSS Zen Garden 的标记，所以重点可能是让您的新页面中的元素与所有旧页面相对应，以便所有样式表仍然有效，但您应该知道这是 not 一个很好的“语义标记”的例子。以下是您应该注意的一些事项：

• 这个标记是created in 2003，所以它永远不会成为我们目前认为良好语义标记的一个很好的例子。
• 按照设计，CSS Zen Garden 上的标记必须保持不变 - 它是 CSS 的演示，而不是 HTML 的演示。
• 因为在2003 IE6 was the dominant browser 中并且没有其他人在CSS3 方面真的走得很远，所以这个标记包含许多不必要的额外元素作为样式的可供性。值得注意的是标题中的所有span 元素和（更可以说是）子div 元素lselect、larchives 和lresources。
• 除了缺少OOOCSS 之外，此标记还展示了classitis - 无需到处都有多个id 和class 属性。例如，没有必要同时拥有lselect 的id 和select 的class，您可以只使用选择器#lselect h1。
• 最后，linkList2 在语义上是一个糟糕的id。它不在链表上，它是否是第二个取决于标记的所有其余部分。使用的 ids 和 class 名称也是语义标记的一部分。