HTML网站开发：使用div还是ul来制作导航和菜单

Question

我正在开发一个Web 2.0网站，一直在研究网站如何处理菜单和导航栏。许多网站（例如Twitter）使用UL，而像Stack Overflow这样的网站使用包含链接的ID的DIV。

除了消除一些IE错误之外，不使用UL是否有优势？

使用UL是否有优势？

谢谢！

- Ryan Rohrer

---

实际上，Stack Overflow在问题/标签/用户等导航列表中使用了一个无序列表（ul）。 - Chuck

是的，但是对于页脚导航和“退出|关于|常见问题”部分，它是一个 div。 - Ryan Rohrer

Answer 1

这取决于您的视角，UL代表无序列表。将元素放入UL元素中是一种表达元素子级（<li>）为列表项，因此是一个逻辑组的语义化方式。这使得HTML代码块具有更多的结构/含义，而不仅仅是一堆

标签。

菜单是否属于列表？我认为是的。因此，如果您可以，最好使用ul来进行类似这样的操作。

使用CSS对ul进行样式设计可能会更加困难，特别是当菜单是水平的时候。

- Chad Grant

---

除了最后一句话，我同意所有内容。它们非常容易进行样式设置，实际上几乎与 div 相同，因为您可以将 li 元素设置为 display: block，此时您就拥有了类似 div 的东西。 - Fenton

请注意该句中的“can”一词，指的是水平方向。一旦您知道了如何做，它并不那么困难... 但是要想水平样式化 ul，去掉显示的标记等等需要更多的 CSS 和知识。 - Chad Grant

Answer 2

我个人在所有的菜单需求中使用 ul/li，因为即使是未经过样式处理的浏览器（例如 Links），也能清楚地看出它是某种类型的菜单，其中包含各种链接，可导航至网站上的不同部分。

不仅如此，ul、li 和 a 可以创建出非常有趣的菜单，带有各种选项和 CSS 精灵背景，这种标记语言非常简单，容易操作。

使用 divs 也可以实现这一点，但目的不够明确。使用正确的 CSS 布局浏览器，您不会注意到任何差异，唯一知道的只有您和执行 view-source 的用户。

如果需要使用 JavaScript 解析 dom，则可能会有所不同，也可能不会……

- X-Istence

---

谢谢。我认为在与开发团队合作时，明确的意图非常重要，而根据Sohnee所说的display:block，我认为我可以完成我需要的一切。 - Ryan Rohrer

此外，如果您的网站需要（或将来需要）508合规性，则多个嵌套的ul，li的分层结构有助于Textreader导航。 - Jay Stevens

Answer 3

更适合屏幕阅读器，并且是一种强制使菜单保持清洁的方法。如果需要，li标签基本上可以像div一样处理。

因此，基本上区别在于ul标签更为专业化，但可以实现与div相同的效果。

- Jacob Hansson