标签在HTML5中已被彻底废弃，不能用于创建目录列表，应统一使用语义化、可访问的或替代。

dir

标签早已被废弃，不能用于创建目录列表 浏览器早已停止对 dir 的支持，现代 HTML（HTML5+）中它既无语义价值，也不渲染为可用的交互式目录结构。如果你在代码里写了 <dir><li>item</li></dir>，多数浏览器会当作未知标签忽略其样式和语义，甚至可能触发解析错误或降级为 div 行为。

用 ul + li 替代 dir 是唯一可靠方案

所有合法、可维护、可访问的“目录列表”都应基于语义化列表构建：

• ul 表示无序列表，适合平级目录项（如侧边栏导航、文档大纲）
• ol 适用于有明确顺序的层级（如章节编号目录）
• 嵌套 ul 或 ol 实现多级目录（注意缩进与 ARIA 层级一致性）
• 配合 aria-label 或 role="directory"（仅当需显式声明用途时）增强可访问性

为什么不能用 dir：历史与兼容性现实

HTML 2.0 中的 dir 本意是显示简短目录项（类似文件管理器图标视图），但从未被广泛实现；HTML 4.01 已标记为“不赞成使用”，HTML5 彻底移除。当前行为：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• Chrome/Firefox/Edge 对 dir 不做特殊处理，仅当作自定义标签解析
• 没有默认样式，不会自动换行、对齐或添加项目符号
• 屏幕阅读器完全忽略其语义，无法被识别为目录结构
• W3C 验证器报错：Element dir is obsolete

生成带层级的目录（如文档 TOC），该用什么？

真实场景中，“目录列表”往往需要锚点跳转、自动展开/收起、或从 heading 自动生成。这时靠手写 ul 不够，推荐：

• 用 JavaScript 解析页面 h2–h6，生成嵌套 ul 结构（注意 id 是否存在，否则跳转失效）
• 服务端渲染时，Markdown 解析器（如 remark）通常自带 TOC 插件，输出标准 ul + li
• 若需折叠功能，用 details/summary 包裹子 ul，比 JS 更轻量且原生支持
• 避免用 nav 套整个目录——除非它是全局主导航；TOC 属于 section 或 aside 更准确

实际中最容易被忽略的点：目录项的 href 必须指向页面内真实存在的 id，且该 id 不能重复、不能含空格或特殊字符（否则跳转失败）。别依赖 dir 试图绕过这个基本约束。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！