为什么使用 <UL> 和 <LI> 标签创建工具栏很常见？

Question

我发现网页中有很多“工具栏”都是用HTML标签UL和LI实现的，并且使用样式“float:left”。例如，在http://www.yahoo.com/中使用FireBug就可以轻松找到这种模式。是否有原因呢？我认为UL和LI并非为创建工具栏而发明的。

- Morgan Cheng

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>  

- John Feminella

---

“HTML已经发展到越来越多地将语义与表现分离。”一开始没有分离（例如可以看到<font>，<b>和<i>标签）。 - Richard

好的，澄清一下：我的意图是有的，但我认为你所描述的演示元素是因为当时存在的实际考虑而悄然出现的。比如说，当时还没有发明CSS。无论如何，我们从那以后走了很长的路程（感谢上天）。 - John Feminella

@JimmyP：嘿，我可没写StackOverflow！ ;) - John Feminella

好的回答。我还要补充一点，据我所知，选择使用 <ul> 而不是 <dl> 的原因是因为用于视力障碍者的屏幕阅读器可以很好地处理 <ul>。 - JasonSmith

Answer 2

UL和LI用于列表，而您正在列出一堆链接（子导航、工具等）。

- stesch

Answer 3

通过允许使用border-left/right，它还避免了将不符合语义的分隔符（例如竖杠）强制添加到代码中以进行呈现的做法，这也会增加屏幕阅读器要朗读的不必要内容。 例如：

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

- aknock

Answer 4

可能的一个原因是 - 它们在低级客户端上具有合理的回退行为 - 即它变成了一棵树。但实际上，<ul> 和 <li> 只是描述嵌套列表数据的方式；使用 CSS 控制布局，它们最初的意图主要是为了方便。

- Marc Gravell

Answer 5

可能是因为某些认为网络标准是唯一正确的人将它们标记为这样。毕竟，工具栏是一个图标列表！

但我个人对标记的方法是，在创建涉及工具栏等应用程序 UI 元素的 Web 应用程序时，您不必按照 HTML 网络标准构建所有内容，因为它们不是为标记应用程序而创建的，而是为文档创建的。在这种情况下，只需使用最适合您的任何内容（例如带有跨度列表的 div，使用类名称指定应用程序的上下文语义）。

注意：我的答案特别适用于使用工具栏，而不是常规网站导航。

- Rahul

---

为什么这个被投票否决了？如果你投票否决了某个东西，请解释一下原因。 - Rahul

不是我说的，但我猜测：1）你建议不遵循Web标准；2）你的论点是因为Web文档和Web应用程序之间存在差异。我对这两点都不同意（但不足以让我自己投反对票）。 - Treb

Answer 6

一个尚未提到的原因是，将菜单编写为列表有助于搜索引擎更好地解析您的网站。顶级搜索引擎将能够找出嵌套的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标签的专门文章，因此我将不得不通过表达我的观点来回答。

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

（现在，如果只有我的观点像拉里·佩奇一样有价值就好了。;-)）

- Joel Potter

---

我从未听说过搜索引擎在处理表格、嵌套的div或任何其他形式的标记时会出现问题...你有更多信息的链接吗？ - nickf

我在几个地方看过这个。我现在正在使用手机，无法复制/粘贴，但是等我回到普通电脑旁边时，我会给你几个链接的。 - Joel

@nick：已添加链接和澄清。 - Joel