HTML Lists
356 points
• 2 days ago
• Article
Link
文章深入探讨了五种 HTML 列表类型，提醒开发者不要只局限于无序列表和有序列表。选择合适的列表更多是关于语义和含义，而不是仅仅为了视觉呈现。作者给出了一套决策框架：对用户输入字段使用控件列表；当顺序重要时使用有序列表；对键值对使用描述列表；对 UI 控件使用菜单；无序列表则作为默认的通用选择。
控件列表通过 <select> 配合 <option> 用于固定选择，而 <datalist> 用于提供建议输入。 <select> 支持使用 <optgroup> 进行分组、用 <hr> 做视觉分隔，以及通过 size 属性控制可见项数。 <datalist> 可与任何输入类型配合，包括范围滑块和周选择器，但作者提醒不同浏览器在为 datalist 选项应用样式时存在不一致，尤其是 Chrome 和 Firefox 之间。
当项目顺序会改变含义时，应使用有序列表（<ol>），例如食谱、算法或按字母排序的列表。文章介绍了有用的属性，如 reversed（用于降序编号）和 start（用于在多个列表间保持编号连续）。还演示了有序与无序列表如何嵌套，能构建出结构复杂但语义清晰的内容，即便在没有视觉渲染时也能保持可理解性。
描述列表（<dl>）在 HTML4 中曾被狭义地视为定义列表，但在 HTML5 中已扩展为适用于任何键值对关系。作者建议广泛使用它们来展示元数据、用户资料，甚至用于调试 JSON 对象。 HTML5 允许在 <dl> 中使用 <div> 将相关的术语和描述分组，这使得通过 CSS 进行样式化更为灵活。
<menu> 元素被推荐用于工具栏和控制按钮，在语义上不同于作为分区元素的 <nav> 。 <nav> 可以包含标题、段落等多种内容，而 <menu> 则专用于包含带有交互命令的列表项。文章澄清这两者并非互斥：<menu> 可以出现在 <nav> 内，但反过来则不成立。
当没有其他列表类型的特定语义适用时，无序列表（<ul>）仍是默认选择，作为顺序无关集合的语义"杂物抽屉"。
The article dives deep into the five different types of HTML lists, challenging developers to move beyond basic unordered and ordered lists. It emphasizes that choosing the right list type is about semantics and meaning, not just visual presentation. The author provides a decision-making framework: use control lists for user input fields, ordered lists when sequence matters, description lists for key-value pairs, menus for UI controls, and unordered lists as the default catchall.
Control lists are explored through `<select>` with `<option>` for fixed selections and `<datalist>` for suggested inputs. The `<select>` element supports grouping with `<optgroup>`, visual breaks with `<hr>`, and the `size` attribute for controlling visible items. Meanwhile, `<datalist>` can be paired with any input type, including range sliders and week pickers, though the author warns about browser inconsistencies in styling datalist options, particularly between Chrome and Firefox.
Ordered lists (`<ol>`) should be used whenever changing the item order would change the meaning, such as for recipes, algorithms, or alphabetical listings. The article covers useful attributes like `reversed` for descending numbering and `start` for maintaining continuity across multiple lists. It also demonstrates how ordered and unordered lists can be nested together to create complex, well-structured content that remains meaningful even without visual rendering.
Description lists (`<dl>`), once narrowly defined as definition lists in HTML4, have evolved in HTML5 to handle any key-value pair relationships. The author advocates for using them extensively for metadata display, user profiles, and even debugging JSON objects. HTML5 now allows `<div>` wrappers inside `<dl>` to group related terms and descriptions together, making them more flexible for styling with CSS.
The `<menu>` element is presented as the semantic choice for toolbars and control buttons, distinct from `<nav>` which is a sectioning element. While `<nav>` can contain various content types including headings and paragraphs, `<menu>` exclusively contains list items with interactive commands. The article clarifies that these elements aren't mutually exclusive, a `<menu>` can exist within a `<nav>`, but not vice versa. The unordered list (`<ul>`) remains the default choice when no other list type's specific semantics apply, serving as the semantic junk drawer for collections where order doesn't matter.
88 comments • Comments Link
讨论摘要：
- `<datalist>` 在兼容性上存在重大问题，尤其是在移动端 Safari 和 Android 上的 Firefox 中，不可靠，难以用于生产环境，尽管在 Chrome 中表现良好。有人报告它能与 iOS 的自动完成集成，但也有人指出在 GBoard 上失效或会尝试自动填充联系人信息等问题。
- `<optgroup>` 的 `disabled` 属性在 iOS Safari 中无法正常工作，用户仍能选择本应被禁用的选项。这似乎是一个长期存在的缺陷：iOS Safari 完全不支持该特性，而 macOS Safari 自 2013 年起就已支持。
- 对 `<datalist>` 的批评还包括缺乏足够的定制钩子和灵活性，除了做基本原型之外用处有限。具体问题包括对拼写错误的输入不显示建议，或当选项并非以输入文本开头时不匹配，为此一些开发者放弃它，改用基于 `<ol>` 的自定义实现。
- 有人担心新一代开发者跳过原生 HTML 的学习，转而依赖像 React 这样的框架和大模型，可能会错过一些更简单的原生 HTML 解决方案；但也有人认为这是自然的演进，类似于 AJAX 变得无处不在而不需特别命名，只要抽象能达成目的就是可以接受的。
- HTML 被赞为一个会不断修正问题的活标准，但主流浏览器的实现往往会滞后，可能长达十年，修复也未必像最初设想的那样干净利落。这种缓慢的采纳周期使得依赖较新 HTML 特性在跨平台兼容性上存在风险。
- 一些较少被注意的 HTML 元素如 `<menu>` 、 `<dialog>` 、 `<ruby>` 被提及为未被充分利用，框架常常没有利用它们。讨论中也带着玩味的怀旧提到被弃用的 `<marquee>` 和 `<blink>`，并有人示范如何用 CSS 动画重现 `<blink>` 。
- 这篇文章被认为内容全面、清晰实用，许多有经验的开发者也承认学到了关于 HTML 列表和表单控件的新东西，提醒大家注意原生 HTML 常被忽视的深度和细节。
总体上，讨论既有对浏览器不一致实现的现实挫败感（尤其是围绕 `<datalist>` 和表单控件），也有对 Web 开发实践演变的更广泛反思。尽管有人对原生 HTML 的简洁与强大怀有怀旧情绪，但也普遍接受向抽象和框架转变的现实。社区重视那种全面且有研究支撑的内容，指出未被充分利用的原生特性很有价值，同时也承认浏览器标准化推进缓慢、跨平台兼容性依然是个挑战。 Here is a summary of the discussion:
• The `<datalist>` element has significant compatibility issues, particularly on mobile Safari and Firefox for Android, making it unreliable for production use despite working well in Chrome. Some users report it integrates with iOS autocomplete, while others note it fails with GBoard or attempts to autofill contact information.
• The `disabled` attribute on `<optgroup>` does not function correctly in iOS Safari, allowing users to select supposedly disabled options. This appears to be a long-standing bug, as iOS Safari lacks support for this feature entirely, even though macOS Safari has supported it since 2013.
• `<datalist>` is criticized for lacking sufficient customization hooks and flexibility, limiting its usefulness beyond basic prototypes. Issues include suggestions not appearing for misspelled inputs or when options don't strictly begin with the typed text, leading some developers to abandon it in favor of custom solutions using `<ol>`.
• There is concern that newer developers, having skipped learning raw HTML in favor of frameworks like React and aided by LLMs, are missing out on simpler native HTML solutions. However, others argue this is a natural evolution, similar to how AJAX became so ubiquitous it no longer needed a name, and that abstraction is acceptable as long as it serves the purpose.
• HTML is praised as a living standard where bugs get fixed over time, but the implementation across major browsers can lag by up to a decade, and fixes may not be as clean as originally envisioned. This slow adoption cycle makes relying on newer HTML features risky for broad compatibility.
• Several lesser-known HTML elements like `<menu>`, `<dialog>`, and `<ruby>` are highlighted as underutilized, with frameworks often not leveraging them. The discussion includes playful nostalgia for deprecated elements like `<marquee>` and `<blink>`, with some users demonstrating how to recreate `<blink>` using CSS animations.
• The article is well-received as a comprehensive and refreshingly non-"slop" resource, with many experienced developers admitting they learned new things about HTML lists and form controls. It serves as a good reminder of the depth and nuances of native HTML that are often overlooked.
The discussion reveals a mix of practical frustration with browser inconsistencies, particularly around `<datalist>` and form controls, and a broader reflection on the evolution of web development practices. While there is nostalgia for the simplicity and power of raw HTML, there is also an acceptance of the shift towards abstractions and frameworks. The community values comprehensive, well-researched content that highlights underutilized native features, even as they acknowledge the slow pace of browser standardization and the challenges of cross-platform compatibility.