你不了解 HTML 列表

一句话看懂：资深前端工程师 Frank M. Taylor 在最新技术博客中，系统揭示了 HTML 规范中隐藏的 5 种列表形态（有序、无序、描述、菜单、控件），并指出大多数开发者仅熟悉 <ul> 和 <ol>，对其他原生列表类型知之甚少，导致开发中大量使用冗余的 ARIA 属性和自定义组件。

事件核心：发生了什么

Taylor 在“你不了解 HTML”系列的第二篇文章中，深入 W3C 规范层面，展示了 HTML 列表中容易被忽视的实用特性。他重点拆解了 控件类列表——即以 <select> + <option> 或 <input> + <datalist> 组合实现的表单交互。文章举例说明了 <optgroup> 对选项按语系分组的能力、disabled 属性直接禁止选择整组的用法，以及 <hr> 元素可作为 <select> 的底层列表项实现视觉分割——这些特性完全不依赖 CSS 或 JavaScript。

为什么重要

该观点挑战了当前 Web 开发中“一切序列化内容都用 <ul> 包裹”的惯性做法。Taylor 提出一个简单决策树：只有当列表项的顺序改变会影响语义时，才使用 <ol>；如果是键值对关系，应当使用 <dl>；如果列表项代表界面中的控制动作，则应使用 <menu>。更重要的是，大量表单控件本身已经是原生“列表”，完全不需要开发者手动添加 role="listbox" 和 aria-multiselectable——浏览器已经通过原生语义提供了无障碍支持。这意味着改善 Web 可访问性和降低 JavaScript 依赖，有时只需换用一个正确的 HTML 标签。

对用户/开发者/创作者的影响

对前端开发者而言，本文是一份现成的“语义列表速查表”：多选场景直接使用 <select multiple>，分组选项用 <optgroup>，禁用整组用 disabled 修饰 <optgroup> 而非逐项禁用。对网站无障碍（a11y）审核人员来说，文章点明了原生控件已包含浏览器可访问性支持，不必再额外填充 WAI-ARIA 属性。对使用低代码或 CMS 建站的普通用户，这一原则可以帮助他们在组件选择时理解：下拉选择器本质上就是一种列表界面，无需额外修饰。

值得关注的后续

目前公开信息显示，Taylor 的“You don’t know HTML”系列尚在连载，后续可能进一步覆盖 <menu> 和 <dl> 的深入用法。需要关注的是：主流前端框架（React、Vue、Angular）是否会在文档或设计系统（如 Ant Design、Material-UI）中引入原生 <select> 多选和 <optgroup> 的分组能力，而非一直采用自定义实现；以及各浏览器 DevTools 是否会在检查列表中更明显地标注原生语义。此外，TypeScript 和 ESLint 等代码检查工具也可能推出相关规则，鼓励开发者优先使用原生列表而非自定义组件。

来源：Hacker News · 24h最热