Javascript 为什么创建带有标记的工具栏很常见<；UL>；及<；李>；？

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

例如，在FireBug的帮助下，很容易在中找到此模式

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

HTML是为了语义（事物的含义），而不是表示（它们的外观）。由于

表示一个无序的列表，并且由于工具栏在概念上只是一个项目列表，因此这是合理的。即使是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

用于列表。您列出了一系列链接（子导航、工具（？）等）

一个可能的原因是，它们有合理的回退行为，而不是低级客户机，即，它变成了一棵树。但实际上

和

实际上只是描述嵌套列表数据；有了css控制布局，他们的初衷在很大程度上只是为了方便。

可能是因为有人认为web标准是唯一正确的标记方式。毕竟，工具栏是图标列表

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

---

注意：我的回答特别提到了工具栏的使用，而不是网站中的常规导航。

一个尚未提及的原因是将菜单作为列表来编写有助于搜索引擎更好地解析您的网站。顶级搜索引擎将能够找出嵌套的div甚至表（在某些情况下），但最好让爬虫的工作更容易，以避免可能的混淆

编辑：

按要求链接：

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

我认为，使用无序列表来显示菜单将有助于爬虫正确解析和索引您的站点。一般来说，组织良好的数据（如列表）有助于更好、更快地爬行。良好地组织您的数据将显著提高机器人正确查找您的关键字并对您的站点进行排名的可能性

---

（现在，如果我对这个主题的意见和拉里·佩奇的一样有价值的话；-）

通过允许使用左/右边框，它还避免了为了演示目的而在代码中强制使用不带符号的分隔符（例如竖条）的做法，这也为屏幕阅读器增加了不必要的内容。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>

|
|
|
|

HTML已经演变为越来越多地将语义与表示分离开来。开始时没有分离（这可以在中看到，例如，和标签）。好吧，澄清一下：意图是存在的，但我认为您描述的呈现元素是出于当时的实际考虑而逐渐出现的。例如，CSS还没有发明。无论如何，从那以后我们已经走了很长一段路（谢天谢地）。@JimmyP:嘿，我没有写StackOverflow！；）回答得好。我还要补充一点，好吧，之所以选择

（而不是说）是因为视力受损的屏幕阅读器处理
非常好。我从来没有听说过搜索引擎在表格、嵌套div或任何其他形式的标记方面有问题。。。你有更多信息的链接吗？我在几个地方读过。我现在用的手机没有复制/粘贴功能，但当我回到普通电脑时，我会给你一些链接。@nick：添加了链接和说明。为什么这个被否决了？如果你投了反对票，请解释原因。不是我，但我的猜测是：1）你建议不要遵循web标准，2）你的论点是因为web文档和web应用之间存在差异。我不同意这两种观点（但我自己也不太可能投反对票）