<dir> 标签在现代 HTML 中完全不可用，它从未被浏览器统一实现，HTML5 已彻底删除；误用会导致无样式、无语义、无障碍失效；应改用 <ul>/<ol> + <li> 配合正确 id 锚点实现可靠目录结构。
<dir> 标签在现代 HTML 中完全不可用，它不是“早期结构布局”的合理选择，而是已被移除的、从未被正确实现的历史残留。
为什么 <dir> 从来就不是可靠的目录结构方案
HTML 2.0 提出 <dir> 时，本意是渲染紧凑型图标式目录（类似 DOS 文件列表），但浏览器厂商从未统一实现其样式或语义。到 HTML 4.01 就已标记为“不赞成使用”，XHTML 1.0 Strict 直接剔除，HTML5 彻底删除。你现在写 <dir>HTML</dir>，Chrome/Firefox/Edge 都当它是未知标签处理——没有默认样式、不触发列表行为、不参与可访问性树。
实际项目里误用 <dir> 的典型错误现象
- 页面显示为纯文本，无换行、无缩进、无项目符号（因为浏览器不识别该标签的语义）
- W3C 验证器报错：
Element dir is not supported in HTML5 - 屏幕阅读器跳过整个区块，或将其读作普通容器而非导航结构
- 手写
<li>嵌套在<dir>内（如<dir><li>HTML</li></dir>）——这既不符合原始规范，也不被任何浏览器支持
替代方案必须满足的三个硬性条件
真正可用的目录结构要同时满足：语义正确、样式可控、可访问可用。只有以下组合能稳定达成：
- 平级目录项 → 用
<ul>+<li>，配合aria-label="Table of contents"显式声明用途 - 带编号的章节目录 → 用
<ol>，避免手动写序号，让浏览器自动管理 - 多级嵌套（如 h2 下挂 h3）→ 嵌套
<ul>，且每个<li>内的锚点href必须指向页面中真实存在的id值（不能含空格、中文、特殊字符）
最容易被忽略的锚点细节
自动生成 TOC 时，很多人只关注结构生成，却忘了校验 href="#section-2" 对应的 <h2 id="section-2"> 是否真实存在、是否唯一、是否被 JS 动态覆盖。一旦缺失或冲突，点击目录就失效——这不是 <dir> 能绕过的，也不是 CSS 能修好的，是 HTML 结构层面的基本约束。
