为什么创建带有标记<ul>和<li>的工具栏很常见?

HTML用于 语义 (什么意思),不是 演示 (它们的样子)。自从 <ul> 表示一个 无序列表 因为工具栏在概念上只是一个项目列表,所以这是明智的。甚至stackoverflow也能做到!

<div class="nav">
  <ul>
    <li><a href="/questions">Questions</a></li>
    <li><a href="/tags">Tags</a></li>
    <li><a href="/users">Users</a></li>
    <li><a href="/badges">Badges</a></li>
    <li><a href="/unanswered">Unanswered</a></li>
  </ul>
</div>  

UL 和 LI 用于列表。您将列出一组链接(子导航、工具(?)等)

一个可能的原因-他们 合理的 一个低级客户的回退行为——也就是说,它变成了一棵树。但在现实中 <ul> 和 <li> 实际上只是描述嵌套的列表数据;通过CSS控制布局,它们的原始意图在很大程度上只是一种便利。

可能是因为有人认为网络标准是一种真正的方法,所以将其标记为这样。毕竟,工具栏是图标列表!

但我个人的标记方法是,当你创建一个包含一些应用程序UI元素(如工具栏)的Web应用程序时,你不必根据HTML Web标准构建所有东西,因为它们不是为标记应用程序而创建的,而是为文档而创建的。在这种情况下,只需使用最适合您的工具(比如一个带有跨度列表的DIV,使用类名为应用程序指定上下文语义)。

注意:我的答案特别是指使用工具栏,而不是网站中的常规导航。

一个尚未提到的原因是,将菜单写为列表有助于搜索引擎更好地分析您的站点。顶级搜索引擎将能够找出嵌套的div甚至表格(在某些情况下),但最好让爬虫的工作更容易避免可能的混淆。

编辑:

按要求链接:

http://blog.fryewiles.com/seo/03-04-2008/ul-titles-nesting-uls-for-better-seo http://importantseotips.blogspot.com/2008/09/why-using-div-is-better-than-table-seo.html http://webdev.entheosweb.com/2008/02/24/why-i-switched-to-a-tableless-design/

实际上,我找不到很多专门针对SEO的UL标签的文章,所以我必须通过声明我的观点来限定我的答案。

我认为,使用无序列表呈现菜单将有助于爬虫正确解析和索引您的网站。通常,组织良好的数据(如列表)有助于提高爬虫速度。组织好你的数据将大大提高机器人正确查找关键词和对你的网站进行排名的可能性。

(现在,如果我对这个问题的看法和拉里·佩奇的一样有价值的话。)

通过允许使用左/右边框,它还避免了为了表示目的而强制将非人工分隔符(例如竖线)放入代码中的做法,这也为屏幕阅读器读取添加了不必要的内容。例如

<div class="nav">
    <a href="/questions">Questions</a> |
    <a href="/tags">Tags</a> |
    <a href="/users">Users</a> |
    <a href="/badges">Badges</a> |
    <a href="/unanswered">Unanswered</a>
</div>