HTML5导航标签内容

似乎是在与HTML5中的<nav>标签文件冲突的例子。我见过的大多数例子都是这样用的：HTML5导航标签内容

<nav> 
    <ul> 
    <li><a href='#'>Link</a></li> 
    <li><a href='#'>Link</a></li> 
    <li><a href='#'>Link</a></li> 
    </ul> 
</nav>

但是我想知道这是不是因为人们习惯使用div。有一些例子，我已经看到，只是这样做

<nav> 
    <a href='#'>Link</a> 
    <a href='#'>Link</a> 
    <a href='#'>Link</a> 
</nav>

第二种方法似乎对我来说更清洁和更多的语义。是否有“官方”正确版本？是否有理由仍然在nav标签中使用<ul>，而不是直接使用锚元素？

来源

2011-09-01 Falmarri

这两个例子都是语义的。

在第一示例中，锚定件的列表是明确的无序列表。在第二个例子中，链接列表只是锚元素的集合。

如果你只是想链接一维集合，我建议您用

<nav> 
    <a href='#'>Link</a> 
    <a href='#'>Link</a> 
    <a href='#'>Link</a> 
</nav>

然而

坚持使用ul元素允许明确的分级菜单（如下拉菜单或树型列表）：

<nav> 
    <ul> 
    <li> 
     <a href="#">Link</a> 
    </li> 
    <li> 
     <a href="#">Link</a> 
     <ul> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Link</a> 
    </li> 
    <li> 
     <a href="#">Link</a> 
     <ul> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</nav>

来源

2011-09-01 22:15:28 zzzzBov

第一个版本更适合屏幕阅读器（现在不记得源代码）。 – Teetrinker

@Teetrinker，第一个是列表，第二个是树。对于屏幕阅读器来说，它们都不是更好的，因为它们表达了完全不同的含义。如果你打算传达一棵树，那么第一棵树就是不可接受的。 – zzzzBov

的论点是，屏幕阅读器读取：“导航/列表/第一项/链接到A /第二个项目/链接到B ..”与“导航/链接到/链接到B ......” 我完全在树上得到你的观点。 – Teetrinker

唯一真正的区别可能是搜索引擎如何查看链接。例如，在无序列表中，Google可能会明白该列表中的所有项目都是相关的。在第二个例子中，Google可能会认为没有任何链接是相关的。 Google可以使用该信息进行索引并更准确地显示您的信息。

它们可以显示相同的，但真的有很多标记的是关于如何如果没有在所有或者一个机器人正在搜索你的网站相关信息附加到页面样式信息应呈现。

来源

2011-09-01 22:19:13 Caimen

谷歌或任何地方都提到实际上有意义的项目并按照你的意思解释它？ – Lukas

@ djlukas777谷歌真的没有透露很多谷歌做什么，原因很明显，但很显然，谷歌在乎关于语义标记。了解什么语义标记真的是了解googlebot的关键。列表进入列表项标签，谷歌然后明白，它正在查看列表。如果它是一个段落标记，那么Google知道它是一个段落。在正确的地方使用正确的标签，Googlebot会喜欢你。对段落以外的内容使用段落标记，那么Googlebot不会喜欢你。 – Caimen

好吧，我想这对我来说很明显:)对你的答案来说很多thx – Lukas

您可以使用。

名单往往只被用作链接列表通常就是这样，一个列表。但是，这取决于你。

来源

2011-09-02 08:45:33

他们之间没有真正的区别。然而，像Caimen说的那样，搜索引擎使用页面标记将数据分组以更好的网页搜索结果。如果链接在主题上非常相似（例如对于博客），则建议您使用第一个链接，如果链接不相似（用于从网站搜索导航结果），则使用第一个链接。

来源

2011-09-02 09:19:48 deztructicus

HTML5导航标签内容

回答

相关问题