logo标签列表

HTML5页脚元素中的链接（导航和侧边栏）？

htmlsemanticsfooternav
8
我正在将页面从HTML4迁移到HTML5，并且遇到了一些问题。在页脚中有一系列包含链接的列表。其中大多数链接到有关该网站本身的信息（如常见问题等）。因此，我认为可以将它们放在nav元素中（请参见《HTML5简介》和HTHML5医生）。但是，有两个列表包含链接到Facebook等外部页面。现在我可以将它们包装在aside中，但这是一个边缘情况：
“合法地将其他页面上的链接与页脚内的aside一起包装-但是请问您是否将aside作为页脚的同级而不是包括它？既然其他页面的链接可能与整个页面而不仅仅是页脚内容相关。”（HTML5简介）
我也可以将它们留在页脚中而不包裹它们。由于页脚中所有链接列表是一个“可视单元”，因此目前我不想将外部链接完全排除在页脚之外，尽管从语义角度来说这可能更好。
我正在寻找具有类似页脚的HTML5网站，但是找不到任何内容。
你们认为哪种方法最好？
谢谢。
4个回答
12

我建议只需在 <footer> 中使用链接即可。

如果您想将链接放在 <nav> 中，这也可以接受，但我建议不要这样做。 <nav> 元素旨在标记“主要”导航块，而您将链接放在页脚中表明它们不是主要导航块。（从某种意义上说，<footer> 和 <nav> 几乎是矛盾的。）规范甚至 特别讨论了这种情况：

并非所有页面上的链接组都需要在 nav 元素中 - 该元素主要用于由主要导航块组成的部分。特别是，页脚通常会有一个短的链接列表，指向网站的各个页面，例如服务条款、主页和版权页面。仅使用 footer 元素就足够了；虽然可以在这种情况下使用 nav 元素，但通常是不必要的。

至于 <aside>，如果您只打算放置一些链接，那么这可能有些过度，特别是因为它们虽然是外部链接，但与其他链接一起属于同一组。如果它有助于样式，并且外部链接感觉像是一个自包含的单元，则可以这样做 - 否则就不必费心了。我认为 <footer> 元素本身已经具有足够的侧边栏（aside-ish）语义。

谢谢Daniel。在介绍HTML5中，你所提到的规范部分也有提及。但作者们表示，在某些情况下，他们认为在页脚中使用nav标签来放置链接是可以接受的。但我也可以直接将所有链接放在页脚中，而不需要将它们包装在任何其他元素中。 - north
4

您是否已经在页脚中拥有了要用nav包裹的链接，例如在header中重复了这些链接吗？（因为网站通常会在footer中重复header中的链接）。

如果是这样，我建议根本不要将footer中的链接包裹在nav中，因为它们只适用于主导航，如果您正在复制链接，那么只有一个集合（例如在header中的链接）应该在nav中。

如果不是这种情况，并且没有footer链接是重复的并且很重要，那么可以将其中一些链接包装在nav中，而其他链接则保留在页脚中。

我之前写过一篇文章，HTML5-使用还是不使用nav，或许能对您有所帮助。

谢谢您也是，Ian。是的，我在标题内部有一个导航栏，其中包括指向登录页面和站点主要部分的链接。如前所述，页脚中的列表包括指向faq，howto等的链接。因此，它们不那么重要，至少如果您了解网站，但也不是次要的。但我开始认为，在没有导航或周围侧边栏的情况下将所有列表放在页脚中会很好。 - north
是的，在这种情况下，似乎不需要 nav（也不需要 aside）。 - Ian Devlin
2
HTML5规范实际上特别指出了在页脚中链接到各种网站页面的用例，并且说您不需要使用<nav>来处理这些链接： “
谢谢你的回答，保罗。我不担心我的标记会让任何人感到困惑，我只是试图做出一个“明智的决定” :) - north
0
如果你没有某些原因需要对外部页面的链接进行分组（例如样式），我认为你的方法是可以的。
嗨，Simone，我还没有选择方法 :) 所以你的意思是将它们放在页脚内而不使用包装元素吗？ - north
是的，如果您没有真正的理由来分组链接。另一方面，我认为<div>或<aside>也可以用于此目的。 - Simone
嗨 Simone，你介意加上你认为的原因吗？ - SenhorLucas
当然 - 我认为对于 OP 的使用情况，没有理由添加额外的 DOM 层。爬虫可能已经足够聪明，可以自己找出外部链接，因此除非你有充分的理由（例如样式），否则不需要单独的语义。 - Simone
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接