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

我的网站有一个全局导航，它位于所有页面的标题中。我已经用

标记了它

我也有一个导航在许多单独的页面，只适用于该页面。因此，如果这是一篇很长的文章，那么页面导航可以让您对部分进行分页。这也已使用

标记标记

所有页面的页脚与StackOverflow页面底部的页脚几乎相同。这里有将导航链接分组在一起的标题、一些版权信息以及其他有趣的内容

我认为在

标记中也标记页脚的导航是不合适的，因为它不打算成为页面或任何页面的主导航。因此，我们使用了一个带有

标记的表格来包装标题（下面的链接是行），例如：

技术
堆栈溢出
服务器故障
超级用户

有了HTML5，我知道描述列表

可以用于名称-值对。那么，是否允许/适当采取以下措施：

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

技术
堆栈溢出
服务器故障
超级用户

我想不出一个更好的方法（不使用nav+列表），但我也不想错误地标记东西（即导致语义值不佳）

如果一位HTML5专家能够透露一些信息，那将是非常棒的

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

根据

元素（由我强调）上的：

并不是页面上的所有链接组都需要在nav元素中-在 元素主要用于由主要 导航块。特别是，页脚通常有一个 指向站点各个页面的链接的简短列表，例如 服务、主页和版权页仅页脚元素 对此类情况而言已足够；而导航元素可以用于这种情况 在某些情况下，这通常是不必要的。

我认为在您的示例中使用

在语义上是不正确的，因为该元素是为关联列表保留的，将名称/术语与值配对

您自己说过，您拥有的页脚菜单几乎与堆栈溢出相同，因此，如果您检查其菜单的代码，它将使用有序列表（

）构建

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

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

技术

---

这样，“页脚菜单”列表的每个列表项都可以是带有标题的菜单。语义上，它是一个链接列表列表。我为您制作了一个超级基本的提琴来说明它是如何工作的：

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

如果是，您的

页脚

将包含一个

部分

（可能有多个，具体取决于页脚内容），并将多个

部分作为子部分，例如：


技术

堆栈溢出
服务器故障

生活/艺术

摄影
科幻与幻想


如果姐妹站点的列表很复杂/很长，并且与您的用户相关，那么这可能特别有意义

否则，
页脚
将不包含任何标题或部分内容元素。在这种情况下，此选项似乎是合适的，例如：


技术
堆栈溢出
服务器故障
生活/艺术
摄影
科幻与幻想

如果姐妹站点列表对您的大多数用户来说并不相关或不重要（我猜Stack Exchange的页脚属于这一类），那么这可能特别有意义。

但是，如果您的页脚包含额外的“节”（在这种情况下，您可能应该使用节内容元素，即，
节
）

中间立场是仅对整个姐妹站点列表使用章节/标题，而不是其子章节，例如：


姐妹站点
技术
堆栈溢出
服务器故障
生活/艺术
摄影
科幻与幻想

如果姐妹站点列表是相关的，这可能特别有意义，但这些姐妹站点的分类并不是那么重要。
只需使用标准列表元素即可。表可能是您可能采取的最糟糕的方法。对于dd元素是否必须描述dt元素，或者它们是否也可以描述每个dt元素中的内容，我感到困惑，但一个项目列表在语义上无助于解释该列表的用途。列表的用途是导航，但不是主导航。它有点像页脚中的“您可能还对……感兴趣”部分。每一页都有相同的信息，因为它在页脚。
<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>