Question

我的网站有一个全局导航，位于所有页面的标题中。我已使用<nav>标记对其进行了标记。

我还在许多单独的页面上显示了一个仅适用于该页面的导航。因此，如果它是一篇很长的文章，页面导航允许您对部分进行分页。这也已使用<nav>标记进行了标记。

所有页面的页脚都与StackOverflow页面底部的页脚几乎相同。有一些标题可以将导航链接组合在一起，一些版权信息以及其他任何有趣的内容。

我认为在<nav>标记内标记页脚导航也不合适，因为它不打算成为页面或任何页面的主导航。所以使用了带有<th>标签的表来包装标题（并且链接是下面的行），例如：

<tr>
<th> TECHNOLOGY </th>
</tr>
  <tr>
  <td>
  <ol>
  <li>Stack Overflow</li>
  <li>Server Fault</li>
  <li>Super User</li>
  </ol>
  </td>
  </tr>

使用HTML5，我知道描述列表<dl>可用于名称 - 值对。以下是允许/适当的：

<dl>
<dt> TECHNOLOGY </dt>
<dd> Stack Overflow </dd>
<dd> Server Fault </dd>
<dd> Super User </dd>
</dl>

我想不出更好的个人方式（不使用nav +列表），但我也不想错误地标记内容（即导致语义价值不佳）。

如果一个HTML5专家可以提供一些很好的亮点。

更新：我必须进行判断调用并确定定义列表仍然是最适合使用的语义。这只是我个人的判断，因为只使用一个列表是毫无意义的。

Answer 1

根据<nav>元素official HTML 5 Spec（我强调）：

并非页面上的所有链接组都必须位于导航元素中 - element主要用于由major组成的部分导航块。特别是，页脚通常具有链接到网站各个页面的简短列表，例如条款服务，主页和版权页面。 单独的页脚元素足以应付此类案件;虽然nav元素可以用于此类情况，通常是不必要的。

我认为在你的情况下使用<dl>在语义上是不正确的，因为该元素是为关联列表保留的，配对名称/术语和值。

你自己说过你的页脚菜单几乎与Stack Overflow相同，所以如果你检查它们的菜单代码，它就是用一个有序列表构建的（<ol>）。

就个人而言，我喜欢在大多数情况下使用无序列表进行导航，并且为了在导航中获得标题，我建议使用这样的结构：

<ul id="footer-menu">
   <li>
     <strong>TECHNOLOGY</strong>
     <ul>
        <li><a href="the-link.html">Stack Overflow</a></li>
        <li><a href="the-next-link.html">Server Fault</a></li>
     </ul>
   </li>
</ul>

这样，“页脚菜单”列表的每个列表项都可以是带有标题的菜单。从语义上讲，它是一个链接列表列表。我为你做了一个超级基本的小提琴，以说明它是如何工作的：http://jsfiddle.net/psnb6tb9/

Answer 2

我认为您必须决定是否要使用标题元素（以及分割内容元素）。两种方式都是可能的。这主要取决于您是否希望页脚内容成为document outline的一部分。

如果是，您的footer将包含section（可能是多个，具体取决于您的页脚内容），其中包含多个section个孩子，例如：

<footer>
  <section>
    <!-- you may use a heading element here, e.g., 
    <h1>Sister sites</h1>
    -->

    <section>
      <h1>Technology</h1>
      <ul>
        <li>Stack Overflow</li>
        <li>Server Fault</li>
      </ul>
    </section>

    <section>
      <h1>Life / Arts</h1>
      <ul>
        <li>Photography</li>
        <li>Science Fiction & Fantasy</li>
      </ul>
    </section>

  </section>
</footer>

如果姊妹网站列表很复杂/很长，并且与您的用户相关，这可能尤为有用。

如果没有，您的footer将不包含任何标题或分段内容元素。在这种情况下，dl element似乎是合适的，例如：

<footer>
  <dl>
    <dt>Technology</dt>
      <dd>Stack Overflow</dd>
      <dd>Server Fault</dd>
    <dt>Life / Arts</dt>
      <dd>Photography</dd>
      <dd>Science Fiction & Fantasy</dd>
  </dl>
</footer>

如果姊妹网站列表与大多数用户不相关或不重要，我可能会特别有意义（我猜Stack Exchange的页脚属于这一类）。
但是，如果您的页脚包含其他“部分”（在这种情况下您可能应该使用分段内容元素，即section），这不太合适。

中间立场是仅对姐妹网站的整个列表使用部分/标题，而不是其子部分，例如：

<footer>
  <section>
    <h1>Sister sites</h1>
      <dl>
        <dt>Technology</dt>
          <dd>Stack Overflow</dd>
          <dd>Server Fault</dd>
        <dt>Life / Arts</dt>
          <dd>Photography</dd>
          <dd>Science Fiction & Fantasy</dd>
      </dl>
  </section>
</footer>

如果姐妹网站列表相关，这可能尤其有意义，但这些姐妹网站的分类并不重要。

如何使用HTML5标记页脚内的导航？

2 个答案: