多个导航元素的HTML5语义？

我正在学习HTML5，并且已经给出了一个将CSS Zen Gardens转换为HTML5语义版本的项目。我已经能够轻松地转换它的大部分，但底部的链接/导航给我一些问题。
转换此处理/处理多个导航的最佳方式是什么？多个导航元素的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元素是段。

来源

2012-12-31 George-Intrigued

如果您制作linkList2 a section那么您的语义是'这里是本节的导航'。请注意0已经是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，因为它们都是各自章节中的最高级别标题（我已经在上面进行了更改）。但是，从实际的可访问性角度来看，我认为仍然允许将它们作为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的标记，所以重点可能是在新页面中的元素与所有旧样式对应，以便所有样式表仍然可以工作，但是您应该知道这是而不是示例好的“语义标记”。这里有一些事情你应该知道的：

此标记是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名称也是语义标记的一部分。

来源

2012-12-31 11:54:40 robertc

多个导航元素的HTML5语义？

回答

相关问题