Html 为什么我应该使用“li”而不是“div”？

Why should I use 'li' instead of 'div'?

提问by zsharp

I'm not sure why I need to use ul-li vs simply using divs when listing items. I can make both look exactly the same so where is the functional advantage to creating an unordered list vs lining up divs?

我不确定为什么在列出项目时需要使用 ul-li 而不是简单地使用 div。我可以让两者看起来完全一样，那么创建无序列表与排列 div 的功能优势在哪里？

回答by Jeremy DeGroot

For semantic correctness. HTML has the ability to express lists of things, and it helps the Google robot, screen readers, and all manner of users who don't care solely about the presentation of the site understand your content better.

为了语义正确。HTML 具有表达事物列表的能力，它可以帮助 Google 机器人、屏幕阅读器和各种不只关心网站呈现的用户更好地理解您的内容。

回答by J?rg W Mittag

Im not sure why i need to use ul-li vs simply using divs when listing items. I can make both lookexactly the same

我不知道为什么在列出项目时我需要使用 ul-li 而不是简单地使用 div。我可以让两者看起来完全一样

That there is the key word in your question: "look". Can you also make them typethe same for blind people using a Braille reader? Can you make them soundthe same for blind people using a text-to-speech synthesizer? Can you stillmake them look the same for visually impaired people using custom client-side CSS user-stylesheets?

您的问题中有一个关键词：“看”。你也可以让盲人使用盲文阅读器输入相同的内容吗？你能用文字转语音合成器让盲人听到相同的声音吗？对于使用自定义客户端 CSS 用户样式表的视障人士，您仍然可以使它们看起来相同吗？

That word, "look", is a very dangerous word?– when you use that in relation to HTML, all alarms should go off in your head. HTML is a language for describing the semantic structure of a hypermedia document. A semantic structure doesn't havea "look", it's an abstract concept.

这个词，“看”，是一个非常危险的词？——当你在 HTML 中使用它时，所有的警报都会在你的脑海中响起。HTML 是一种描述超媒体文档语义结构的语言。语义结构不会有一个“看”，它是一个抽象的概念。

Even if you don't care about all this semantic hocuspocus and you don't care about blind people, consider this: Google, Yahoo, MSN and Co. don't have eyes, they don't "look" at your rendered CSS.

即使你不关心所有这些语义上的胡说八道，也不关心盲人，考虑一下：谷歌、雅虎、MSN 和 Co. 没有眼睛，他们不会“看”你渲染的 CSS .

回答by Rex M

By using semantically correct markup, you are embedding extra information in your text. By using ul/li you are communicating to the consuming application that the information is a list, and not just "something" (who knows what) that is some text inside an arbitrary element.

通过使用语义正确的标记，您可以在文本中嵌入额外的信息。通过使用 ul/li，您正在向消费应用程序传达信息是一个列表，而不仅仅是“某物”（谁知道是什么），即任意元素中的一些文本。

回答by Benxamin

Direct answer to your question: The functional advantage is that divsmean little on their own, whereas ul lisexplicitly mean "this is an un/ordered list of items."

直接回答您的问题：功能优势是div本身意义不大，而ul lis明确表示“这是一个未/有序的项目列表”。

The term "semantics" refers to the way that you use the inherent meaning of existing structures to create explicit meaning. HTML is comprised of tags that mean certain things by themselves. And there are established rules/guidelines/ways to use them so that your published HTML document conveys what you want it to mean.

术语“语义”是指您使用现有结构的内在含义来创建明确含义的方式。HTML 由标签组成，这些标签本身就意味着某些事情。并且有既定的规则/指南/方法来使用它们，以便您发布的 HTML 文档传达您想要的含义。

If you list something in your document, then add an ordered list (UL) or an unordered list (OL). On the other hand, the page division (DIV) element is used to create a specific & separate piece of content.

如果您在文档中列出了某些内容，请添加有序列表 (UL) 或无序列表 (OL)。另一方面，页面划分 (DIV) 元素用于创建特定且单独的内容。

The divelement "divides." When you look at a page, there are specific parts like a content body, the footer, a header, navigation, menus, forms, etc. And you can use divtags to create these divisions. Often, the page parts correspond with a visual layout, so using explicit page divisions (DIVs) to cut up your layout in CSS is a natural fit. This way the divtags become structural.

该DIV元素“鸿沟”。当您查看页面时，有特定的部分，例如内容主体、页脚、页眉、导航、菜单、表单等。您可以使用div标签来创建这些分区。通常，页面部分与视觉布局相对应，因此使用显式页面划分 (DIV) 在 CSS 中分割布局是很自然的选择。这样div标签就变得结构化了。

If you misuse or overuse the divtag, it can create unintended meaning & code bloat.

如果您误用或过度使用div标签，它会产生意想不到的含义和代码膨胀。

To confuse matters: Google uses h3and divto "divide" their listed search results. ul > li > h3 + div

混淆问题：谷歌使用h3和div来“划分”他们列出的搜索结果。ul > li > h3 + div

So when you turn off all styles (Shift+Cmd/Crtl+S in Firefox w/ WebDeveloper toolbar), the divsshould go away, and stack naturally. Your naked HTML should still render a nice page with a clear hierarchy: top to bottom, most important content first, and lists with bullets & numbers for listed items. And it's a good idea to add a link near the top (for non-visual users) that allows you to skip down to: main content, important forms or the main headings (like a table of contents).

因此，当您关闭所有样式（带有 WebDeveloper 工具栏的 Firefox 中的 Shift+Cmd/Crtl+S）时，div应该消失并自然堆叠。您的裸 HTML 仍应呈现具有清晰层次结构的漂亮页面：从上到下，最重要的内容在前，以及列出项目的项目符号和编号列表。并且在顶部附近添加一个链接（对于非视觉用户）是个好主意，它允许您向下跳到：主要内容、重要表格或主要标题（如目录）。

Finally, keep in mind that you are building a document. Without all the visual effects, it should still be a cogent document.

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

回答by highseas1851

There is a lot of talk about using <li>or using <div>but not one comment gave a solid example of the content that goes inside of these tags. My feeling is that <ul>and <li>are not really that important as I cannot tell you the last time that I actually read a "list" of things on a website, newspaper or magazine -- online or in print.

有很多关于使用<li>或使用的讨论，<div>但没有一个评论给出了这些标签内部内容的可靠示例。我的感觉是，<ul>并<li>没有那么重要，因为我不能告诉你我最后一次真正阅读网站、报纸或杂志上的“清单”——在线或印刷品。

<div>is much more versatile. If you are listing out ingredients for a cake, yes that is a list. If you are listing things out to pack for a hiking trip, yes that is a list.

<div>用途更广。如果您要列出蛋糕的配料，是的，这就是清单。如果您要列出远足旅行要打包的东西，是的，这就是一个清单。

But what about a user-form of, for example, that lists some random things that are not really a list, nor a series of paragraphs, nor all "headers." Some things are dates, some are checkboxes and some are text. Div it up, if you ask me. A blind person would be mis-informed if it was marked up with <ul>and <li>and they heard "Here is a list of ..." when it is just a hodge-podge of stuff, not really a list.

但是，例如，列出一些不是真正列表、一系列段落或所有“标题”的随机内容的用户表单呢？有些是日期，有些是复选框，有些是文本。把它分开，如果你问我。如果它被标记为<ul>和<li>，盲人会被误导，并且他们听到“这是一个......

回答by Joshua

If you use div instead, lynx won't be able to render the page in a readable fashion.

如果您改用 div，lynx 将无法以可读的方式呈现页面。

回答by TomHastjarjanto

You should use appropriate tags for the content you want to put inside. This doesn't only mean that ul/li is more appropriate for lists. This also means you have to consider the content of your list and see if its an unordered/ordered or definition list.

您应该为要放入的内容使用适当的标签。这不仅意味着 ul/li 更适合列表。这也意味着您必须考虑列表的内容并查看它是无序列表/有序列表还是定义列表。

Another argument is that when you disable css. The browser will render it's default styling which makes it nicer to look at if alternative browsing devices are used. It also enhances accesibility.

另一个论点是，当您禁用 css 时。浏览器将呈现它的默认样式，这样可以更好地查看是否使用了其他浏览设备。它还增强了可访问性。

回答by Scott Muc

I personally like li's for the semantics. When viewing the source you immediately see that you have a list of something if they are wrapped by an li. A div collection provides no semantic meaning, and usually the only semantics to the list are introduced by the css classes like "listItem". Which obviously points to the fact that an li should have been used in the first place.

我个人喜欢 li 的语义。查看源代码时，您会立即看到，如果它们被 li 包裹，您将得到一个列表。div 集合不提供语义，通常列表的唯一语义是由“listItem”之类的 css 类引入的。这显然表明首先应该使用 li 的事实。

If you have a loop in your presentation logic, I always favour a li over a div.

如果您的演示逻辑中有循环，我总是喜欢 li 而不是 div。

回答by netrox

<li> means an item in a list and that lets parsers (browsers, search engines, spiders) know that you're listing items. You can use DIV instead of LI but those parsers would never know that those items are being listed and DIV does not really describe anything except that it's a block.

<li> 表示列表中的一个项目，它让解析器（浏览器、搜索引擎、蜘蛛）知道您正在列出项目。您可以使用 DIV 而不是 LI，但那些解析器永远不会知道这些项目正在被列出，而且 DIV 并没有真正描述任何东西，只是它是一个块。

回答by tpow

It depends on the project. I recently did a project that had a menu designed using a list. They wanted to add a bunch of effects, like sliding/fading, and also wanted to make it collapsible with multiple levels.

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

In this case, DIV's were much more suitable. I was able to create containers for child div's and apply jQuery to achieve the desired effects.

在这种情况下，DIV 更合适。我能够为子 div 创建容器并应用 jQuery 来实现所需的效果。

Even if your project doesn't have these requirments yet, it may be prudent to think of how you may change it in the future...

即使你的项目还没有这些要求，考虑将来如何改变它可能是谨慎的......