dd标签语义职责是专用于描述dt定义术语的含义,必须嵌套在dl内且紧随对应dt之后;它不负责样式,仅表达解释关系,错误使用会损害可访问性和seo。

什么是 dd 标签的语义职责
dd(definition description)是 HTML 中专用于描述术语或名词含义的标签,必须嵌套在 dl(description list)内,且紧随对应的 dt(definition term)之后。它不负责视觉样式,只表达“这是对上面那个术语的解释”这一层含义。
常见错误是把它当普通段落容器用,比如放在 div 里或单独使用——浏览器不会报错,但语义丢失,影响可访问性(如屏幕阅读器无法建立术语-解释的关联)和 SEO 结构化理解。
正确嵌套结构:一个 dt 可对应多个 dd
一个术语可能有多种解释角度(如技术定义、使用场景、常见误区),这时允许一个 dt 后跟多个 dd。反之,不能一个 dd 解释多个 dt。
示例:
- API
- 应用程序编程接口,用于不同软件模块间通信的约定集合。
- Web API 通常通过 HTTP 请求与 JSON 响应实现交互。
- REST
- 一种基于 HTTP 协议设计 Web 服务的架构风格。
- 每个
dd必须直接位于dt后,中间不能插入其他标签(如p或div) - 不要用
dd包裹标题(h2等)或列表(ul),如需复杂内容,可在dd内部使用合法内联或流式元素
样式控制:避免重置默认缩进导致语义不可见
浏览器默认会给 dd 添加左侧缩进(通常 40px),这是有意为之的视觉提示,帮助用户感知术语与解释的层级关系。若用 CSS 清除 margin-left 且未提供其他区分手段(如字体加粗、颜色、图标),会导致结构扁平化,降低可读性。
更稳妥的做法是微调而非归零:
dd {
margin-left: 1em; /* 保留缩进语义,但适配设计 */
line-height: 1.5;
}
- 不要写
dd { margin: 0; },除非你同步用border-left或背景色等视觉线索替代缩进 - 响应式场景下,缩进值建议用相对单位(
em或rem),避免小屏时文字挤到左侧边缘
可访问性关键点:屏幕阅读器如何处理 dd
主流屏幕阅读器(NVDA、VoiceOver)在遍历 dl 时,会明确播报“term:XXX”,然后“definition:YYY”,前提是结构完整且无嵌套错误。一旦 dd 被包裹进 div 或缺失 dt,就会退化为普通文本流,失去术语关联。
- 禁用
role="definition"等冗余 ARIA 属性——dd本身已有足够语义 - 避免在
dd中放交互控件(如按钮)而未说明其作用,否则会打断术语解释的线性逻辑 - 如果解释内容含代码块,用
code+pre组合,不要仅靠缩进模拟
真正难的是让设计师和内容编辑都理解:这个缩进不是“样式问题”,而是信息架构的锚点。漏掉它,文档就从结构化变成纯文本了。











