[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元素应该是nav元素，或者那个linkList2应该是nav，而子div元素应该是节。

Answer 1

如果将linkList2设为section，则您的语义是“此处是本节的导航”。请注意，nav已经是sectioning content，因此将其包装在section中将有些多余。

还请注意the spec说：

并非页面上的所有链接组都必须位于nav元素中-元素主要用于包含主要内容的部分导航块。

没有必要仅将每个链接集都放在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，因为它们都是各自章节中的最高级别标题（我已经在上面进行了更改）。但是，从实用的可访问性的角度来看，我认为如果在标记中以h3和h2标题开头，请将它们保留为h1。

另一种合适的方法是：

<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属性。例如，既不需要同时具有id的lselect和class的select，也可以只使用选择器#lselect h1。
• 最后，linkList2在语义上是可怕的id。它不在链接列表上，它是否是第二个列表取决于其余所有标记。使用的id和class名称也是语义标记的一部分。

Answer 2

您应该使用<nav> HTML5元素，因为这不仅是您想要的最语义的元素，而且还允许使用屏幕阅读器的人使用地标浏览页面（<nav>将对应于[C0 ]地标）。