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

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

为了它，不需要在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的标记，所以关键是你的新页面中的元素可以与所有旧元素相对应，这样所有的样式表仍然可以工作，但你应该知道这是不是< / em>良好的“语义标记”的一个例子。以下是您应该注意的一些事项：

此标记为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>对应于navigation界标）。

现在，如果您的网站上有多个具有链接的区域（例如：主导航和辅助导航），则应确保正确标记了不同的<nav>元素。这使屏幕阅读器可以正确地宣布地标（例如：“主要导航” ，“次要导航” ），而不是通常将所有内容都宣布为“导航” ），这可能会造成混淆。

要标记<nav>元素，可以执行以下操作之一：

选项1：屏幕上没有可见的文本

使用aria-label为元素提供替代文本。

<nav aria-label=’primary’>
  <ul>
    ...List on links here...
  </ul>
</nav>
<nav aria-label=’secondary’>
  <ul>
    ...List on links here...
  </ul>
</nav>

选项2：屏幕上可见的文字

如果屏幕上有可识别区域的文字（例如：“相关内容” ），则可以使用aria-labelledby。

<nav aria-label="Site Menu">
  <ul>
    ...List on links here...
  </ul>
</nav>
<article>
  <h1>Title</h1>
  ...
  <nav aria-labelledby="id-1">
    <h2 id="id-1">
      Related Content
    </h2>
    <ul>
      ...List on links here...
    </ul>
  </nav>
</article>

这里有一些资源可以进一步解释这一点：

多个导航元素的HTML5语义？

2 个答案:

选项1：屏幕上没有可见的文本

选项2：屏幕上可见的文字