多个导航元素的HTML5语义？ [英] HTML5 semantics for multiple nav elements?

问题描述

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

I'm learning HTML5 and have been given a project of converting CSS Zen Gardens into a HTML5 semantic version. I've been able to convert most of it with ease, however the links / navigation at the bottom are giving me some problems.
What would be the best way of converting this / handling multiple navigations?

<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元素是部分。

At the moment I'm torn between thinking linkList2 should be a section, and each of the child div elements should be nav elements, or that linkList2 should be a nav, with the child div elements being sections.

推荐答案

如果你制作 linkList2 a 部分然后您的语义为'此处是此部分的导航'。请注意 nav 已经分段内容，因此将其包装在部分中会有点多余。

If you make linkList2 a section then your semantics are 'here is navigation for this section'. Note that nav is already sectioning content, so wrapping it in a section would be somewhat redundant.

另请注意规范说：

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

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 的方法是最好的，尽管我不会过分担心子元素部分：

There's no need to put every set of links in a nav just for the sake of it. I think your approach of making linkList2 a nav would be best, though I wouldn't worry too much about making the child elements 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 h3 >和 h1 标记中的标题。

As I mentioned above, nav is sectioning content, so all the headings should really be h1 as they are all the highest level headings in their respective sections (I've changed them above). However I think it is still permissible, from a practical accessibility standpoint, to leave them as h3 if they are preceded by h2 and h1 headings in the markup.

另一种方法是：

<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>

如前所述，请勿包装部分（或文章）， nav 就够了。

As I mentioned before, don't wrap in a section (or article), nav is enough.

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

A final point, since your question is about semantics. I know you're working on CSS Zen Garden's markup so the point is probably to have elements in your new page to correspond to all the old ones so that all the stylesheets still work, but you should know that this is not an example of good 'semantic markup'. Here are some things you should be aware of:

• 此标记为创建于2003年，因此它永远不会成为我们当前认为良好语义标记的一个很好的例子。


• 根据设计，CSS Zen Garden 上的标记保持不变 - 它是CSS的演示，而不是HTML的演示。


• 因为在 2003 IE6是占主导地位的浏览器并且其他任何人都没有真正走得太远CSS3无论如何，这个标记包含许多不必要的额外元素作为样式的可供性。值得注意的是标题中的所有 span 元素和（更可以说是）孩子 div 元素 lselect ， larchives 和 lresources 。


• As由于缺少 OOOCSS ，此标记演示 classitis - 无需多个 id 和 class 属性无处不在。例如，不需要 id lselect 和类的选择，而只需使用选择器 #lselect h1 。


• 最后， linkList2 在语义上是一个糟糕的 id 。它不在链表上，它是否是第二个依赖于标记的其余部分。使用的 id 和 class 名称也是语义标记的一部分。

• This markup was created in 2003, so it is never going to a great example of what we currently consider good semantic markup .
• By design, the markup on CSS Zen Garden has to stay the same - it is a demo of CSS, not a demo of HTML.
• Because in 2003 IE6 was the dominant browser and no-one else had really got very far with CSS3 anyway, this markup contains a lot of unnecessary extra elements as affordances for styling. Notably all the span elements within the headings and (more arguably) the child div elements lselect, larchives and lresources.
• As well as a lack of OOOCSS, this markup demonstrates classitis - there is no need to have multiple id and class attributes everywhere. For instance there is no need to have both an id of lselect and a class of select, instead you could just use a selector #lselect h1.
• Finally, linkList2 is a terrible id semantically. It's not on a linked list and whether or not it's the second one depends on all the rest of the markup. The ids and class names used are also part of semantic markup.

这篇关于多个导航元素的HTML5语义？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！