HTML Lists

This second installment in the “You don’t know HTML” series is going to be all about the ways that we put collections of things together. We’re skipping over the MDN and W3Schools introductory pages and instead we’re going into the kind of stuff you discover after accidentally taking your cousin’s Ritalin right before you open up the W3C specs. Let’s dive deep into lists.

“你并不真正了解 HTML”系列文章的第二篇，将深入探讨我们组织内容集合的各种方式。我们将跳过 MDN 和 W3Schools 的入门页面，直接进入那些只有在你误服了表弟的利他林（Ritalin）并打开 W3C 规范后才会发现的硬核内容。让我们深入研究列表。

We’re not even talking about the ways you can style them. This isn’t an introduction! I’m assuming you’ve got real-world experience writing HTML and this isn’t your first time searching “How to make a list.” What I’m going to cover are all of the ways you can put collections of content together. So I’m talking about these kinds of lists: Ordered, Unordered, Description, Menu, Control. And if you didn’t know there were five different kinds of lists in HTML, perfect. That must mean you don’t know HTML!

我们甚至不会讨论如何为它们添加样式。这不是一篇入门教程！我假设你已经具备了编写 HTML 的实战经验，这也不是你第一次搜索“如何制作列表”。我将涵盖所有组织内容集合的方法。我所指的列表类型包括：有序列表、无序列表、描述列表、菜单列表和控件列表。如果你之前不知道 HTML 中有五种不同的列表，那太好了，这正好说明你确实“不了解 HTML”！

How Do we Decide Which to Use?

我们该如何决定使用哪种列表？

No need to ask AI for a summary; I’ll just give you the ending up front. Here’s how you’ll decide which kind of list to use:

• If the items in the list are for a single control field where you’re getting data from a user, you either want a <select> + <option> mashup or an <input> + <datalist> combo.
• If changing the order of the items would change the meaning of the list, then use an ordered list (<ol>).
• If the items are key-value pairs, or keys-to-value pairs, use a description list (<dl>).
• If the items are controls that will perform actions in the user interface, use a menu (<menu>).
• Use an unordered list (<ul>).

没必要去问 AI 要总结，我直接把结论告诉你。以下是你决定使用哪种列表的准则：

• 如果列表项用于获取用户数据的单一控件字段，你需要 <select> + <option> 的组合，或者 <input> + <datalist> 的组合。
• 如果改变列表项的顺序会改变列表的含义，请使用有序列表 (<ol>)。
• 如果列表项是键值对或键到值的映射，请使用描述列表 (<dl>)。
• 如果列表项是将在用户界面中执行操作的控件，请使用菜单 (<menu>)。
• 其他情况请使用无序列表 (<ul>)。

Control Lists with <select> and <option> or <input> and <datalist>

使用 <select> 和 <option> 或 <input> 和 <datalist> 的控件列表

When we think of lists, we don’t usually throw user control fields into the mix. And that’s weird, because we construct our navigations using lists, and those are lists of links that the user…uh…can control. So we tend to have a bias with what we think lists are. But I’m here to bring that to the forefront of your mind: when we’re building forms, sometimes we’re building lists that our users will interact with.

当我们想到列表时，通常不会把用户控件字段包含在内。这很奇怪，因为我们使用列表来构建导航，而那些导航本质上就是用户可以控制的链接列表。因此，我们对“什么是列表”往往存在偏见。但我在这里要提醒你：当我们构建表单时，有时我们实际上是在构建用户将与之交互的列表。

If it’s a fixed list, use <select> and <option> When I say “fixed”, I mean that the user can only choose the items from that list. If that’s the case, let’s use select and option.

如果是固定列表，请使用 <select> 和 <option> 当我提到“固定”时，是指用户只能从该列表中选择项目。如果是这种情况，我们就使用 select 和 option。

(Code example omitted for brevity)

So long as you’re doing this with an actual select element and an option, you don’t have to use the aria-multiselectable attribute on a list element with the role="listbox" attribute. Native browser semantics bakes that in for you.

只要你使用的是标准的 select 元素和 option，就不必在带有 role="listbox" 属性的列表元素上使用 aria-multiselectable 属性。浏览器原生的语义已经为你内置了这些功能。

Put related options together with <optgroup> What if we wanted to group languages by language-families? We can do that with optgroup which lets us group a list of options together.

使用 <optgroup> 将相关选项分组 如果我们想按语系对语言进行分组该怎么办？我们可以使用 optgroup，它允许我们将一组选项归类在一起。

Use native HTML options first for improving the list Sometimes we may want a visual break between your groups. If we don’t want to fiddle with CSS, we’re in luck! An <hr> is an approved item in a select. Not only does that make our select look a little sharper, we can also use the size attribute to control how many items will be displayed at once.

优先使用原生 HTML 选项来优化列表 有时我们可能希望在组之间添加视觉分隔。如果我们不想折腾 CSS，那很幸运！<hr> 是 select 中被允许使用的元素。这不仅能让我们的 select 看起来更整洁，我们还可以使用 size 属性来控制一次显示多少个项目。

If it’s a suggested list, use <datalist> Let’s suppose we have a control where we want to suggest a list options to a user. This is where we get the datalist involved. Using a datalist is a two-step process because we have to tell the input to use a datalist.

如果是建议列表，请使用 <datalist> 假设我们有一个控件，想要向用户提供一系列建议选项。这时就需要用到 datalist。使用 datalist 是一个两步过程，因为我们必须告诉 input 元素去使用 datalist。