为什么我应该用'li'，而不是"div"?

Question

我不知道为什么我需要使用ul-李vs简单地使用div当列出的项目。我可以让两个看起来完全一样的那么，是功能的优势，以创建一个无序列表vs排div?

Answer 1

有关语义的正确性。 HTML有表达的东西列表的功能，它可以帮助谷歌机器人，屏幕阅读器，以及用户的所有方式谁不只是关心网站的介绍了解您的内容更好。

Answer 2

  

林不知道为什么我需要使用UL-李VS简单地列出项目时使用的div。我可以使双方的看完全相同

这有你的问题的关键词：“看”。你也可以让他们的键入的同为使用盲文读者盲人？你可以让他们的声音的同为使用文本到语音合成盲人？你能还是的让他们使用自定义客户端CSS用户的样式表看起来是一样的视障人？

这一句话，“看”，是一种非常危险的一句话 - 当您使用有关HTML，所有的报警应该在你的头上熄灭。 HTML是用于描述一个超媒体文档的语义结构的语言。语义结构不的的的一“看”，它是一个抽象的概念。

即使你不关心这一切的语义hocuspocus，你不关心盲人，考虑一下：谷歌，雅虎，MSN和公司没有眼睛，他们不“看”渲染的CSS。

Answer 3

通过使用语义正确的标记，你是嵌入文本的额外信息。通过使用任意元素里面的一些文字UL /李友正在通信的消费应用程序的信息是一个列表，而不是仅仅“东西”（谁知道）。

Answer 4

直接回答你的问题： 功能优势是的div 意义不大，对自己，而 UL LIS 明确表示“这是项目的UN /有序列表。”

术语“语义”指的是使用现有结构的内在含义，创建明确意义的方式。 HTML是由是由自己意味着某些事情的标签。并有既定的规则/指南/方式，使您发布的HTML文档传达你希望它是什么意思来使用它们。

如果你列出你的文档中的东西，然后添加一个有序列表（UL）或一个无序列表（OL）。在另一方面，在网页划分（DIV）元素用来创建一个特定的和独立的内容片段。

的 DIV 元素 “分裂”。当你看到一个页面，有喜欢的内容主体，页脚，标题，导航，菜单，表格等特定部分，您还可以使用 DIV 标签来创建这些分歧。通常情况下，页面的部分与可视化布局相对应，所以使用显式页面师（资料核实）在CSS削减了你的布局是天作之合。这样的 DIV 标签成为结构性的。

如果您滥用或过度使用的 DIV 标签，它可以带来意想不到的意义和代码膨胀。

要混淆问题：谷歌使用的 H3 和 DIV 以 “分” 他们列出的搜索结果。的 UL> LI> H3 + DIV

所以，当你关闭所有样式（Shift +命令/键Crtl + S在Firefox W / WebDeveloper工具栏），在 div的应该走了，自然叠加。你的裸HTML应该还是呈现一个清晰的层次结构一个不错的页：从上到下，最重要的内容第一，并列出子弹和号码列出的项目。它是一个好主意，添加接近顶部的链接（非可视化用户），使您可以向下跳到：主要内容，重要形式或主标题（如表的内容）。

最后，请记住，你正在建设一个文档。没有所有的视觉效果，它仍然应该是一个有说服力的文件。

Answer 5

有很多谈论使用<li>或使用<div>的却没有一个注释了，这些标签里面去的内容了坚实的例子。我的感觉是<ul>和<li>，我不能告诉你最后一次，我实际上是在一个网站，报纸或杂志阅读的事情“清单”是不是真的那么重要 - 在网上或打印

<div>是更灵活。如果你是一个蛋糕列明成分，是的，这是一个列表。如果你列出的东西出来收拾徒步旅行，是的，这是一个列表。

但有关用户的形式，例如，列出了一些随机的东西，是不是一个真正的名单，也没有一系列的段落，也并非所有什么“头”。有些东西是日期，有些是复选框和一些文字。 DIV它，如果你问我。盲人将错误通知，如果它被打上了<ul>和<li>，他们听到“这是清单......”时，它仅仅是东西大杂烩，不是一个真正的名单。

Answer 6

您应该用适当的标签，你想要把里面的内容。这不仅意味着UL /李更适合列表。这也意味着你必须考虑你的列表的内容，看看它的一个无序/有序或定义列表。

另一种说法是，当禁用的CSS。该浏览器将呈现它的默认样式，这使得它更好看如果使用替代浏览设备。这也增强了无障碍环境。

Answer 7

如果您使用DIV相反，山猫将无法呈现页面以可读的方式。

Answer 8

我个人很喜欢李对语义。当查看源您可以立即看到你对某件事有一个列表，如果它们被包裹里。一个div集合不提供语义，而且通常只有语义名单由CSS类像“的listItem”出台。这显然指向一个的李应首先被使用的事实。

如果你在你的表现逻辑回路，我总是青睐在一个div一华里。

Answer 9

<li> 意味着一个项目的清单，让分析程序(浏览器、搜索引擎，蜘蛛)知道你在清单的项目。你可以使用DIV而不是李但是，这些分析程序将永远不会知道这些项目被列和DIV不真正地描述任何东西除外，它的一块。

Answer 10

使用<li>（如适用）降低<div>标签汤，你在网页中经常见到，这有助于开发出了不少。

这并不是说<div>的是坏的，但每当一个标签被过度使用（如<div>经常是），它削弱了标签的语义来的是完全无用的地步。我最近才知道这个从我们聘请，以帮助我们的Web应用程序的CSS / UI承包商，并已在HTML代码的可读性/可维护性带来的变化是非常明显的对我。

Answer 11

如果您关心越来越名单看用最小的努力一定的方式，那么这是一个没有脑子已经：<li>是一个字符小于<div>键入的和的结束标记是可选在HTML中。

而这除了别人都说过的语义。

Answer 12

有关原始浏览器或移动设备上正确渲染

Answer 13

这取决于项目。我最近做了一个项目，有使用列表设计的菜单。他们想加入一堆效果，如滑动/淡出，也想让它多层次可折叠的。

在这种情况下，DIV的是更适合。我能够创造孩子div的容器和应用jQuery来达到预期的效果。

即使你的项目没有这些质量要求是，它可以谨慎地考虑如何可能会在未来改变它......

Answer 14

约UL里另一件事是;可以使用UL作为容器，其帮助你设置Style类

<ul class="myHebe">
  <li><a href="#">.net</a></li>
  <li><a href="#">.net</a></li>
</ul>

我喜欢这个图案当我使用UL

.myHebe{} // container
.myHebe li {} // items
.myHebe li a {} // subitems

当然，这取决于我们如何想使用它，我们喜欢它。这是我喜欢的方式

希望帮助 感谢

Answer 15

您的问题已经回答了，我想在这里补充我的两分钱。我工作的一个项目，我是做后端逻辑和我的数据正在汇总到我的设计师做了一个页面模板。他使用的UL和李标签来表示各种列表的页面，其中也有一些小部件上。该数据是从哪里CMS用户可以通过html标签输入富文本的到来。当用户开始在他们的内容创建列表不再看起来像符号干邑生产商名单，而搞砸了整个页面。

教训：不要使用列表标签与通用的CSS选择器，如果你的内容可以包含在HTML本身