多个导航元素的 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

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

另请注意 the spec说:

Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks.

没有必要仅仅为了它而将每组链接都放在 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 的标记，所以重点可能是让您的新页面中的元素与所有旧页面相对应，以便所有样式表仍然有效，但您应该知道这不是 一个好的“语义标记”的例子。以下是您应该注意的一些事项:

• 此标记为 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。它不在链表上，它是否是第二个取决于标记的所有其余部分。使用的 id 和 class 名称也是语义标记的一部分。