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

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>

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

如果 HTML5 专家能提供一些启示，那就太好了。

更新：我不得不做出判断并决定定义列表仍然是最适合使用语义的东西。这只是我个人的判断，因为仅仅使用列表是没有意义的。

Answer 1

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

并非页面上的所有链接组都需要在导航元素中—— 元素主要用于由主要组成的部分 导航块。特别是，页脚通常有一个 指向网站各个页面的链接的简短列表，例如 服务、主页和版权页。 单独的页脚元素 足以应付这种情况；而导航元素可以用于这样的 情况下，通常是不必要的。

我认为在您的情况下使用 <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>

这样，“footer-menu”列表的每个列表项都可以是带有标题的菜单。从语义上讲，它是一个链接列表的列表。我为您制作了一个超级基本的小提琴来说明它是如何工作的：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>

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