应遵循HTML列表规范：一、正确选用并规范嵌套；二、添加语义化标题与描述；三、保障可访问性，合理使用ARIA；四、样式控制不破坏语义；五、限制嵌套深度并验证合规性。
如果您希望在网页中呈现有序或无序的信息集合，但列表结构混乱、语义不清或可访问性差，则可能是由于未遵循HTML列表的基本规范与语义化原则。以下是编写结构清晰的HTML列表的具体实践步骤：
一、正确选择列表类型并嵌套语义化
HTML提供三种原生列表元素：
- （无序列表）、
- （有序列表）和
- 直接包裹，且嵌套时仅允许
- 或
- 作为
- 的子元素。
1、根据内容逻辑判断列表性质：若项目存在自然顺序（如步骤、排名），使用
- ；若仅为并列关系（如导航菜单、标签集合），使用
- ；若为术语与解释配对（如词汇表），使用
- 与
- 。
2、在
- 内部需要子列表时，将
- 或
- 作为
- 的**直接子元素**，不可包裹在
或中。
立即学习“前端免费学习笔记（深入）”；
3、为每个
- 添加type属性（如type="1"、type="A"、type="a"）或reversed属性以明确序号行为，避免依赖CSS控制语义。
二、为列表添加有意义的标题与描述
独立存在的列表应具备上下文说明，否则用户（尤其是辅助技术使用者）无法理解其目的。使用
与 或邻近的 –
元素建立显式关联，而非仅靠视觉间距暗示。
1、在列表前插入一个语义化标题，例如
推荐浏览器插件
，确保该标题位于同一节区（sectioning content）内且紧邻列表。2、若需补充说明性文本（如“以下为兼容Chrome 120+的扩展”），将其置于
- 或
- 外部，并用
- 之间作为伪列表项**。
3、对长列表或复杂定义列表，使用
包裹整个列表，并用 提供简明标题，例如 HTTP状态码分类说明 。三、确保可访问性与键盘导航支持
屏幕阅读器依赖正确的HTML结构播报列表信息，包括项目总数、当前索引及嵌套层级。缺失role、aria-label或不当的tabindex会中断这一流程，导致信息丢失。
1、避免为
- 或
- 手动添加tabindex="0"，因为原生列表元素本身不接受焦点；如需整列表可聚焦，请用
- 必须有对应
- ，且二者成对出现；禁止跨项合并或跳过定义项，否则NVDA或VoiceOver将跳过部分条目。
四、控制样式但不破坏语义结构
CSS可用于调整列表外观，但不可通过display: block等声明抹除列表的默认语义行为。移除列表符号或重置margin/padding是允许的，但将
- 改为display: flex后忽略计数器重置则会导致
- 序号错乱。
- 节点的识别。
2、自定义有序列表编号样式时，在
- 上设置counter-reset，在
- 上使用counter-increment和::before伪元素生成内容，**必须保留原有
- 结构**。
3、对多级嵌套列表应用缩进时，优先使用padding-left而非text-indent，因后者不适用于flex布局下的
- ，且可能造成视觉与DOM结构错位。
五、验证嵌套深度与内容合规性
过度嵌套（如超过三层
- 内套
- 再套
- ）会显著降低可读性与维护性，并引发部分旧版辅助工具解析异常。W3C标准虽不限制层级，但实践建议控制在三层以内。
- 是否仅包含合法子元素：允许
- 、
- 、
- 、段落、短语级元素（如、），**禁止直接包含
–
、
ain>、 等节标题或区块容器**。 2、运行W3C Markup Validation Service校验HTML，重点关注“Element ol not allowed as child of element ol”或“Start tag li seen but an element of the same type was already open”类错误，这些表明嵌套结构非法。
3、使用axe DevTools浏览器插件扫描列表区域，确认无“List item not contained by a list”或“ARIA role not appropriate for element”等可访问性违规。
1、检查每个
- 是否仅包含合法子元素：允许
- 结构**。
- 上使用counter-increment和::before伪元素生成内容，**必须保留原有
1、隐藏无序列表符号时，使用list-style: none，而非visibility: hidden或font-size: 0，后者会影响屏幕阅读器对
- 改为display: flex后忽略计数器重置则会导致
包裹并设置对应id。 2、为无可见标题的列表（如侧边栏导航）添加aria-label="主站点导航菜单"，确保字符串准确反映列表功能。
3、在
- 中，每个
包裹，**不得插入到列表开始标签内部或
- 之间作为伪列表项**。
- 内部需要子列表时，将
- 、
- 的子元素。
- （定义列表），每种适用于不同语义场景。错误混用或强行用
