dl 是 dt 和 dd 的唯一合法父容器,二者必须为直接子元素且平级;一个 dt 可对应多个 dd,多个 dt 可共享一个 dd,但需连续;禁用嵌套块级标签,CSS 应保留语义缩进。

dt 和 dd 必须直接嵌套在 dl 里,不能跳级或错位
浏览器不会报错,但屏幕阅读器会丢失术语与解释的语义关联——比如把 dd 放在 dl 外、或用 div 包一层再塞进 dt,都会让无障碍工具读成“一段普通文字”,而非“这是‘HTTP 状态码’的定义”。
-
dl是唯一合法父容器,所有dt和dd都必须是它的直接子元素 -
dt里禁止放p、div、section等块级标签;允许strong、code、em这类内联元素 -
dd不能包裹dt,dt也不能包裹dd;它们是平级兄弟关系,顺序即逻辑:一个dt后面紧跟着它对应的dd(或多个dd)
一个 dt 对应多个 dd 是完全合法的,别硬塞进一个 dd 里用 <p> 分段
比如“闭包”在 JS 和数学中含义不同,或一个参数有“作用”“类型”“默认值”三段说明,直接写多个 dd 更语义清晰,也方便 CSS 单独控制每段样式。
- 错误写法:
<dd><p>定义</p><p>示例</p></dd>—— 屏幕阅读器无法区分段落语义,缩进也容易错乱 - 正确写法:
<dt>timeout</dt><dd>请求超时时间(毫秒)</dd><dd>类型:number</dd><dd>默认值:<code>5000</dd> - 注意:多个
dd之间没有自动间距,需用 CSS 补margin-top或padding-bottom
多个 dt 共享一个 dd 时,dt 必须连续出现,中间不能插 dd
这是表示“同义词共用同一解释”的标准方式,常见于术语表或配置项归类。结构一旦断开,语义就失效。
- 合法:
<dt>HTML</dt><dt>CSS</dt><dt>JavaScript</dt><dd>前端三大基础技术</dd> - 非法:
<dt>HTML</dt><dd>标记语言</dd><dt>CSS</dt><dd>前端三大基础技术</dd>—— 第二个dd会被认为只属于CSS,而非三者共有 - 动态渲染时尤其要注意:从 JSON 拼 HTML 时,得先收集同组术语名,再统一输出
dt块,最后跟一个dd
用 CSS 控制 dd 缩进时,别直接设 margin-left: 0
浏览器默认给 dd 加 margin-left 是为了提供语义暗示(视觉上区分术语与解释),粗暴清零会削弱可访问性线索。
- 推荐做法:重置后显式设置,比如
dd { margin-left: 1.5em; },既可控又保留缩进意图 - 若想加图标代替缩进,用
dd::before { content: "•"; margin-right: 0.5em; },比依赖空白更稳定 - 水平对齐需求(如参数表)优先用
display: grid,但 DOM 结构仍必须保持dl > dt, dd的原始顺序,否则读屏器无法配对
dd 前都有且仅有一个未被其他 dd 隔开的 dt。这种结构断裂不会触发 JS 报错,却会让整个列表在语音导航中变成一堆无主的碎片。

















