Question

我发现网页中有很多“工具栏”是使用HTML标记 UL 和 LI 实现的，样式为“ float：left < / EM> ”。

例如，在FireBug的帮助下，很容易在http://www.yahoo.com/中找到这种模式。

有什么理由吗？我认为UL和LI不是为了创建工具栏而发明的。

Answer 1

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>

Answer 2

UL和LI用于列表。你列出了一堆链接（子导航，工具（？）等）

Answer 3

一个可能的原因 - 他们有一个低级客户的合理的回退行为 - 即它变成一棵树。但实际上<ul>和<li>实际上只是描述了嵌套列表数据;用css控制布局，他们的初衷很大程度上只是为了方便。

Answer 4

可能是因为相信网络标准的人才是真正的标记方式。毕竟，工具栏是一个图标列表！

但我个人的标记方法是，当你创建一个涉及像工具栏这样的app UI元素的web应用程序时，你不一定要根据HTML web标准构建所有内容，因为它们不是为标记应用程序，但用于文档。在这种情况下，只需使用最适合您的方法（如带有跨度列表的div，使用类名为您的应用指定上下文语义）。

注意：我的回答特指工具栏的使用，而非网站中的常规导航。

Answer 5

尚未提及的一个原因是将菜单编写为列表有助于搜索引擎更好地解析您的网站。顶级搜索引擎将能够找出嵌套的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/

我实际上找不到很多专门针对搜索引擎优化的ul标签的文章，所以我必须通过宣布我的观点来限定我的答案。

我认为使用无序列表来显示菜单将有助于抓取工具正确解析和索引您的网站。通常，组织良好的数据（例如列表）有助于更好，更快速地进行爬行。很好地整理数据可以显着提高机器人正确查找关键字和排名网站的可能性。

（现在，如果我对这个主题的看法和拉里佩奇一样有价值。;-)）

Answer 6

通过允许使用border-left / right，它还避免了为了演示目的而强制将非语义分隔符（例如竖条）放入代码中的做法，这也为屏幕阅读器添加了不必要的内容以便读出。 e.g。

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

为什么创建标签<ul>和<li>？</li> </ul>的工具栏很常见

6 个答案: