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 vs仅仅使用divs来列出项目。我可以让它们看起来完全一样，那么创建无序列表和排列div有什么功能优势呢?
15 个解决方案
#1
134
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有表达列表的能力，它可以帮助谷歌机器人、屏幕阅读器和各种各样的用户更好地理解你的内容。
#2
114
Im not sure why i need to use ul-li vs simply using divs when listing items. I can make both look exactly the same
我不知道为什么我需要使用ul-li vs仅仅使用divs列出项目。我可以让两者看起来完全一样
That there is the key word in your question: "look". Can you also make them type the same for blind people using a Braille reader? Can you make them sound the same for blind people using a text-to-speech synthesizer? Can you still make 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 have a "look", it's an abstract concept.
这个单词“look”是一个非常危险的词——当你使用它与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.
即使你不关心所有这些语义上的欺骗，你也不关心盲人，想想这个:谷歌，Yahoo, MSN和公司没有眼睛，他们不会“看”你渲染的CSS。
#3
16
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，您正在与消费应用程序通信，信息是一个列表，而不仅仅是任意元素中的某个文本(谁知道是什么)。
#4
11
Direct answer to your question: The functional advantage is that divs mean little on their own, whereas ul lis explicitly mean "this is an un/ordered list of items."
直接回答你的问题:功能优势是divs本身没有什么意义，而ul lis明确表示“这是一个un/ordered的项目列表”。
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)。另一方面，page division (DIV)元素用于创建特定的和独立的内容块。
The div element "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 div tags 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 div tags become structural.
div元素的“分裂”。当你看一个页面时，有一些特定的部分，比如内容主体，页脚，页眉，导航，菜单，表单等等，你可以使用div标签来创建这些部分。通常，页面部分与视觉布局相对应，因此使用显式页面划分(DIVs)在CSS中分割布局是很自然的。这样，div标签就变成了结构。
If you misuse or overuse the div tag, it can create unintended meaning & code bloat.
如果您误用或过度使用div标记，它会产生意想不到的含义和代码膨胀。
To confuse matters: Google uses h3 and div to "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 divs should 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).
因此，当您关闭所有样式(Shift+Cmd/Crtl+S在Firefox w/ WebDeveloper工具栏)时，div应该会消失，并自然地进行堆栈。您的裸HTML仍然应该呈现一个具有清晰层次结构的漂亮页面:从上到下，首先是最重要的内容，列表中列出的项目的项目和编号。在顶部(对于非视觉用户)添加一个链接是一个好主意，可以让你跳转到:主内容、重要表单或主标题(比如目录)。
Finally, keep in mind that you are building a document. Without all the visual effects, it should still be a cogent document.
最后，请记住您正在构建一个文档。没有所有的视觉效果，它仍然是一份令人信服的文件。
#5
4
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时。浏览器将呈现它的默认样式，这使得查看是否使用了可选的浏览设备变得更好。它也增强了accesibility。
#6
4
If you use div instead, lynx won't be able to render the page in a readable fashion.
如果您使用div, lynx将无法以可读的方式呈现页面。
#7
3
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包装的话。div集合不提供语义意义，通常列表的惟一语义是由css类(如“listItem”)引入的。这显然表明了一个事实，一个li应该首先被使用。
If you have a loop in your presentation logic, I always favour a li over a div.
如果你的陈述逻辑有一个循环，我总是喜欢用li而不是div。
#8
3
<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.
#9
3
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.
关于使用
-
和
- 真的不是那么重要，因为我不能告诉你我最后一次在网站、报纸或杂志上——在线或印刷上——阅读“清单”。
- 真的不是那么重要,因为我不能告诉你我最后一次在网站,报纸或杂志上——在线或印刷上,阅读“清单”。
<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.
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.
但是对于用户形式，例如，列出一些不是真正的列表，不是一系列段落，也不是所有的“标题”的随机事物，该怎么办呢?有些是日期，有些是复选框，有些是文本。如果你问我的话。如果一个盲人被标注为
-
和
- ，他们就会被错误地告知，当它只是一堆东西，而不是一个列表时，他们会听到“这是一个…的列表”。
- ,他们就会被错误地告知,当它只是一堆东西,而不是一个列表时,他们会听到“这是一个……的列表”。
#10
2
Using <li> (where appropriate) reduces the <div> tag soup you so often see in web pages, which helps developers out a lot.
使用
Not that <div>'s are bad, but whenever a tag gets overused (as <div> often is), it dilutes the semantic meaning of the tag to the point of being totally useless. I learnt this recently from a contractor we hired to help with the CSS/UI of our web app, and the difference it has made to the readability/maintainability of the HTML code is very noticeable to me.
并不是说
#11
2
If all you care about is getting lists to look a certain way with minimum effort, then this is a no-brainer already: <li> is one character less to type than <div> and its closing tag is optional in HTML.
如果您所关心的只是让列表以一种最省力的方式显示，那么这已经是一个显而易见的问题:
And that's in addition to what everyone else said about semantics.
这是除了其他人所说的语义之外。
#12
2
For rendering properly on primitive browsers or mobile devices
在原始浏览器或移动设备上正确呈现
#13
2
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...
即使你的项目还没有这些要求，考虑一下你将来如何改变它可能是明智的。
#14
1
another thing about ul li is ; you can use ul as a container which helps you to set Style class
另一件关于ul li的事情是;您可以使用ul作为一个容器来帮助您设置样式类。
<ul class="myHebe">
<li><a href="#">.net</a></li>
<li><a href="#">.net</a></li>
</ul>
I like this pattern when i use ul
我喜欢使用ul时的这种模式
.myHebe{} // container
.myHebe li {} // items
.myHebe li a {} // subitems
Of course it depends on how we want to use it and how we like it. This is the way i like
当然，这取决于我们如何使用它，以及我们如何喜欢它。这是我喜欢的方式
Hope helps Thanks
希望帮助谢谢
#15
1
Your question is already answered by i want to add my two cents here. I was working on a project where i was doing the backend logic and my data was being aggregated into a page template made by my designer. he used ul and li tags to represent every kind of list on the page, some of which were widgets. The data was coming from a cms where users could enter rich text via html tags. when users started creating lists in their content the lists no longer looked like bulleted listes rather screwed up the whole page.
你的问题已经有了答案，我想在这里加上我的两点。我正在做一个项目，在那里我做后台逻辑，我的数据被聚合到一个由我的设计师制作的页面模板中。他使用ul和li标记来代表页面上的每一种列表，其中一些是小部件。数据来自cms，用户可以通过html标签输入富文本。当用户开始在他们的内容中创建列表时，列表看起来不再像项目符号列表，而是把整个页面搞得一团糟。
lesson learned: do not use list tags with generic css selectors if your content can contain html in itself.
经验教训:如果内容本身可以包含html，不要使用带有通用css选择器的列表标签。
#1
134
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有表达列表的能力，它可以帮助谷歌机器人、屏幕阅读器和各种各样的用户更好地理解你的内容。
#2
114
Im not sure why i need to use ul-li vs simply using divs when listing items. I can make both look exactly the same
我不知道为什么我需要使用ul-li vs仅仅使用divs列出项目。我可以让两者看起来完全一样
That there is the key word in your question: "look". Can you also make them type the same for blind people using a Braille reader? Can you make them sound the same for blind people using a text-to-speech synthesizer? Can you still make 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 have a "look", it's an abstract concept.
这个单词“look”是一个非常危险的词——当你使用它与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.
即使你不关心所有这些语义上的欺骗，你也不关心盲人，想想这个:谷歌，Yahoo, MSN和公司没有眼睛，他们不会“看”你渲染的CSS。
#3
16
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，您正在与消费应用程序通信，信息是一个列表，而不仅仅是任意元素中的某个文本(谁知道是什么)。
#4
11
Direct answer to your question: The functional advantage is that divs mean little on their own, whereas ul lis explicitly mean "this is an un/ordered list of items."
直接回答你的问题:功能优势是divs本身没有什么意义，而ul lis明确表示“这是一个un/ordered的项目列表”。
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)。另一方面，page division (DIV)元素用于创建特定的和独立的内容块。
The div element "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 div tags 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 div tags become structural.
div元素的“分裂”。当你看一个页面时，有一些特定的部分，比如内容主体，页脚，页眉，导航，菜单，表单等等，你可以使用div标签来创建这些部分。通常，页面部分与视觉布局相对应，因此使用显式页面划分(DIVs)在CSS中分割布局是很自然的。这样，div标签就变成了结构。
If you misuse or overuse the div tag, it can create unintended meaning & code bloat.
如果您误用或过度使用div标记，它会产生意想不到的含义和代码膨胀。
To confuse matters: Google uses h3 and div to "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 divs should 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).
因此，当您关闭所有样式(Shift+Cmd/Crtl+S在Firefox w/ WebDeveloper工具栏)时，div应该会消失，并自然地进行堆栈。您的裸HTML仍然应该呈现一个具有清晰层次结构的漂亮页面:从上到下，首先是最重要的内容，列表中列出的项目的项目和编号。在顶部(对于非视觉用户)添加一个链接是一个好主意，可以让你跳转到:主内容、重要表单或主标题(比如目录)。
Finally, keep in mind that you are building a document. Without all the visual effects, it should still be a cogent document.
最后，请记住您正在构建一个文档。没有所有的视觉效果，它仍然是一份令人信服的文件。
#5
4
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时。浏览器将呈现它的默认样式，这使得查看是否使用了可选的浏览设备变得更好。它也增强了accesibility。
#6
4
If you use div instead, lynx won't be able to render the page in a readable fashion.
如果您使用div, lynx将无法以可读的方式呈现页面。
#7
3
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包装的话。div集合不提供语义意义，通常列表的惟一语义是由css类(如“listItem”)引入的。这显然表明了一个事实，一个li应该首先被使用。
If you have a loop in your presentation logic, I always favour a li over a div.
如果你的陈述逻辑有一个循环，我总是喜欢用li而不是div。
#8
3
<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.
#9
3
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.
关于使用
-
和
- 真的不是那么重要，因为我不能告诉你我最后一次在网站、报纸或杂志上——在线或印刷上——阅读“清单”。
- 真的不是那么重要,因为我不能告诉你我最后一次在网站,报纸或杂志上——在线或印刷上,阅读“清单”。
<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.
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.
但是对于用户形式，例如，列出一些不是真正的列表，不是一系列段落，也不是所有的“标题”的随机事物，该怎么办呢?有些是日期，有些是复选框，有些是文本。如果你问我的话。如果一个盲人被标注为
-
和
- ，他们就会被错误地告知，当它只是一堆东西，而不是一个列表时，他们会听到“这是一个…的列表”。
- ,他们就会被错误地告知,当它只是一堆东西,而不是一个列表时,他们会听到“这是一个……的列表”。
#10
2
Using <li> (where appropriate) reduces the <div> tag soup you so often see in web pages, which helps developers out a lot.
使用
Not that <div>'s are bad, but whenever a tag gets overused (as <div> often is), it dilutes the semantic meaning of the tag to the point of being totally useless. I learnt this recently from a contractor we hired to help with the CSS/UI of our web app, and the difference it has made to the readability/maintainability of the HTML code is very noticeable to me.
并不是说
#11
2
If all you care about is getting lists to look a certain way with minimum effort, then this is a no-brainer already: <li> is one character less to type than <div> and its closing tag is optional in HTML.
如果您所关心的只是让列表以一种最省力的方式显示，那么这已经是一个显而易见的问题:
And that's in addition to what everyone else said about semantics.
这是除了其他人所说的语义之外。
#12
2
For rendering properly on primitive browsers or mobile devices
在原始浏览器或移动设备上正确呈现
#13
2
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...
即使你的项目还没有这些要求，考虑一下你将来如何改变它可能是明智的。
#14
1
another thing about ul li is ; you can use ul as a container which helps you to set Style class
另一件关于ul li的事情是;您可以使用ul作为一个容器来帮助您设置样式类。
<ul class="myHebe">
<li><a href="#">.net</a></li>
<li><a href="#">.net</a></li>
</ul>
I like this pattern when i use ul
我喜欢使用ul时的这种模式
.myHebe{} // container
.myHebe li {} // items
.myHebe li a {} // subitems
Of course it depends on how we want to use it and how we like it. This is the way i like
当然，这取决于我们如何使用它，以及我们如何喜欢它。这是我喜欢的方式
Hope helps Thanks
希望帮助谢谢
#15
1
Your question is already answered by i want to add my two cents here. I was working on a project where i was doing the backend logic and my data was being aggregated into a page template made by my designer. he used ul and li tags to represent every kind of list on the page, some of which were widgets. The data was coming from a cms where users could enter rich text via html tags. when users started creating lists in their content the lists no longer looked like bulleted listes rather screwed up the whole page.
你的问题已经有了答案，我想在这里加上我的两点。我正在做一个项目，在那里我做后台逻辑，我的数据被聚合到一个由我的设计师制作的页面模板中。他使用ul和li标记来代表页面上的每一种列表，其中一些是小部件。数据来自cms，用户可以通过html标签输入富文本。当用户开始在他们的内容中创建列表时，列表看起来不再像项目符号列表，而是把整个页面搞得一团糟。
lesson learned: do not use list tags with generic css selectors if your content can contain html in itself.
经验教训:如果内容本身可以包含html，不要使用带有通用css选择器的列表标签。