多个导航元素的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已经对内容进行了分区,因此将其包装在一个内容中section会有些多余.

另请注意,规范说:

并非页面上的所有链接组都必须位于nav元素中 - 该元素主要用于由主要导航块组成的部分.

nav为了它,没有必要将每一组链接都放在一个公平的位置.我认为你制作linkList2a 的方法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的标记,所以重点可能是你的新页面中的元素与所有旧元素相对应,这样所有的样式表仍然可以工作,但你应该知道这不是一个好的例子'语义标记'.以下是您应该注意的一些事项:

• 这个标记是在2003年创建的,因此它永远不会成为我们目前认为良好的语义标记的一个很好的例子.
• 按照设计,在CSS禅意花园的标记具有保持不变-这是CSS的演示,而不是HTML的演示.
• 因为在2003年IE6是占主导地位的浏览器,无论如何没有其他人真正使用CSS3,这个标记包含许多不必要的额外元素作为样式的可用性.值得注意的是span标题中的所有元素和(更可以说是)子div元素lselect,larchives以及lresources.
• 除了缺乏OOOCSS,这种标记表明classitis -没有必要拥有多个id和class无处不在的属性.例如,没有必要同时拥有id的lselect和class的select,而不是你可以只使用一个选择#lselect h1.
• 最后,linkList2在id语义上是一个可怕的.它不在链表上,它是否是第二个依赖于标记的其余部分.使用的ids和class名称也是语义标记的一部分.