【问题标题】:Links inside HTML5 footer element (nav and aside?)HTML5 页脚元素内的链接(导航和旁边?)
【发布时间】:2011-11-30 12:22:09
【问题描述】:

我目前正在将页面从 HTML4 移动到 HTML5,但我遇到了一些问题。页脚中有一堆带有链接的列表。其中大多数链接到有关网站本身的信息(常见问题解答等)。所以我认为将它们放在 nav 元素中是可以的(请参阅“介绍 HTML5”和 HTHML5 Doctor)。但有两个列表包含指向 Facebook 等外部页面的链接。现在我可以把它们放在一边,但这有点极端:

“将网站上其他页面的链接包装在页脚内是合法的 - 但问问自己是否将页脚的同级替换为页脚 [...]页面可能与整个页面相关,而不仅仅是页脚的内容。” (介绍 HTML5)

我也可以将它们留在页脚中而不用包装它们。由于页脚中的所有链接列表都是一个“视觉单元”,因此我现在不想将外部链接完全从页脚中取出,即使这在语义方面可能会更好。

我正在搜索具有类似页脚的 HTML5 网站,但找不到。

你们认为最好的方法是什么?

谢谢

【问题讨论】:

    标签: html semantics footer nav


    【解决方案1】:

    我建议只使用带有链接的<footer>

    如果您想将链接包装在 <nav> 中,这是可以接受的,但我建议您不要这样做。 <nav> 元素旨在标记“主要”导航块,而您将链接放在页脚中的事实表明它们不是主要的导航块。 (从某种意义上说,<footer><nav> 几乎是矛盾的。)关于这种情况的规范甚至是 talks specifically

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

    至于<aside>,我会说如果你只在其中放几个链接,那就太过分了,特别是因为它听起来虽然是外部的,但它们与其他链接属于一起。如果它对样式有帮助,并且外部链接感觉像是一个独立的单元,那么可以肯定——否则,不要打扰。我想说<footer> 元素本身已经承载了足够多的语义。

    【讨论】:

    • 谢谢丹尼尔。在介绍 HTML5 中,也提到了您所指的规范部分。但是作者说他们认为在页脚中使用导航是可以的,至少在某些情况下是这样。但我也可以直接将所有链接放在页脚中,而无需将它们包装在任何其他元素中。
    【解决方案2】:

    您是否已经在footer 中拥有想要包装在nav 中的链接,已经在nav 中,例如在header 中? (因为网站经常在footer 中复制header 链接)。

    如果是这样,那么我建议不要将 footer 中的链接包装在 nav 中,因为它们仅用于主导航,如果您要复制链接,那么只有一组(例如header 中的那些)应该在nav 中。

    如果不是这种情况,并且footer 链接都不是重复的并且不重要,那么可以将一些链接包含在 nav 中,而将其他链接不包含在页脚中。

    我不久前写了一篇文章,HTML5 - To nav or not to nav,不久前可能会有所帮助。

    【讨论】:

    • 还要感谢你,伊恩。是的,我在标题内有一个导航,其中包含指向登录页面和网站主要部分的链接。如前所述,页脚中的列表包括指向常见问题解答、操作方法等的链接。因此它们并不那么重要,至少如果您知道该站点,但也不是次要的。但我开始认为,只需将所有列表放在页脚中而没有导航或在它们周围放置就可以了。
    • 是的,在这种情况下听起来确实不需要 navaside 也不需要)。
    【解决方案3】:

    HTML5 规范实际上在页脚中特别指出了指向各种网站页面的链接的用例,因为您不需要为这些页面使用 <nav>

    <aside> 对于页脚中的外部链接似乎很好(根据http://dev.w3.org/html5/spec-author-view/the-nav-element.html#the-nav-element),尽管我不知道它真正增加了多少意义。我认为您不需要将这些链接从页脚中删除。

    不值得过多考虑您的 HTML 标签选择。实际上,谁会对您的标记感到困惑?

    【讨论】:

    • 感谢您的回答,保罗。我不担心我的标记会混淆任何人,我只是想做出一个“有根据的决定”:)
    【解决方案4】:

    如果您出于某种原因(即样式)不需要对指向外部页面的链接进行分组,我认为您的方法是可以的。

    【讨论】:

    • 嘿 Simone,我还没有选择一种方法 :) 所以你的意思是把它们留在页脚中而不使用包装元素?
    • 是的,如果您没有真正的理由对链接进行分组。 OTOH,我认为 <div><aside> 会以同样的方式达到此目的。
    • 嗨 Simone,您介意补充一下您这么认为的原因吗?
    • 当然 - 我认为对于 OP 的用例,根本没有理由添加额外的 DOM 层。爬虫可能足够聪明,可以自己找出外部链接,所以除非你有充分的理由,否则不需要单独的语义——例如样式。
    猜你喜欢
    • 2012-07-23
    • 1970-01-01
    • 2011-07-10
    • 1970-01-01
    • 1970-01-01
    • 2012-12-20
    • 2022-10-25
    • 1970-01-01
    • 2013-12-02
    相关资源
    最近更新 更多