dt标签是描述列表中术语的名称锚点,必须嵌套于dl内且与dd并列;一个dt可配多个dd,多个dt可共用一个dd,但禁止含h1–h6等标题标签,否则破坏语义与可访问性。

dt 标签不是“定义列表中的术语”,而是描述列表中每个条目的名称或术语本身——它不负责“定义”,只负责“命名”;真正承载解释、说明、定义内容的是 dd。
你写 dt,就是在告诉浏览器:“这是我要描述的那个东西的名字”,比如 “Python”、“HTTP 状态码 404”、“闭包”。后续紧跟的 dd 才是回答“它是什么”。
dt 必须嵌套在 dl 里,不能单独存在
- 浏览器会忽略孤立的
dt(不报错,但语义丢失、样式失效、无障碍阅读器跳过) - 常见错误:把
dt当成h3或strong随意放在段落中 - 正确结构只有这一种:
<dl> <dt>Python</dt> <dd>一种通用、高级、解释型编程语言。</dd> <dt>字典</dt> <dd>Python 中以键值对形式存储数据的内置映射类型。</dd> </dl>
-
dt和dd是并列兄弟关系,不是父子;一个dt可以对应多个dd(多角度说明同一术语)
dt 内不能包含标题标签(h1–h6)
- HTML 规范明确禁止:
dt属于“短语内容”,而h1–h6是“章节标题”,语义冲突 - 实际后果:部分屏幕阅读器可能中断朗读,SEO 工具可能降权该列表项
- 替代方案:
- 如需强调,用
strong或 CSS 控制字体加粗/大小 - 如需层级感,靠
dl的嵌套实现(外层dl描述大类,内层dl描述子项)
- 如需强调,用
多个 dt 可共享一个 dd,但顺序必须严格
- 场景常见于同义词或缩写:
<dl> <dt>API</dt> <dt>Application Programming Interface</dt> <dd>应用程序之间交互的接口规范。</dd> </dl>
- 注意:所有
dt必须连续排列,中间不能插入dd或其他元素,否则解析行为不可控(不同浏览器可能拆分成多个列表)
dt 的本质是语义锚点,不是视觉容器。它不控制换行、缩进或间距,这些全靠 CSS;但它决定了辅助技术如何理解“这个词接下来会被解释”——这个逻辑链一旦断裂,整个描述列表就退化为普通文本。

















