5

我发现网页中相当多的“工具栏”是用 HTML 标签UL和LI实现的，样式为“ float:left ”。

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

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

4

6 回答 6

17

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>
于 2009-03-22T12:34:30.117 回答
3

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

于 2009-03-22T12:34:54.390 回答
0

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

于 2009-03-22T12:35:49.770 回答
0

可能是因为有人相信 Web 标准是标记它们的一种真正方式。毕竟，工具栏是图标列表！

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

注意：我的回答专门针对工具栏的使用，而不是网站中的常规导航。

于 2009-03-22T12:35:50.283 回答
0

尚未提及的一个原因是将菜单编写为列表有助于搜索引擎更好地解析您的网站。顶级搜索引擎将能够找出嵌套的 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 标签的文章，所以我必须通过声明我的意见来限定我的答案。

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

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

于 2009-03-22T13:07:07.307 回答
0

通过允许使用左/右边框，它还避免了在代码中强制使用无语义分隔符（例如竖线）以进行演示的做法，这也为屏幕阅读器添加了不必要的内容来读取。例如

<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>
于 2009-03-23T13:42:56.370 回答