dd标签语义职责是专用于描述dt定义术语的含义，必须嵌套在dl内且紧随对应dt之后；它不负责样式，仅表达解释关系，错误使用会损害可访问性和SEO。
什么是 dd 标签的语义职责
dd（definition description）是 HTML 中专用于描述术语或名词含义的标签，必须嵌套在 dl（description list）内，且紧随对应的 dt（definition term）之后。它不负责视觉样式，只表达“这是对上面那个术语的解释”这一层含义。
常见错误是把它当普通段落容器用，比如放在 div 里或单独使用——浏览器不会报错，但语义丢失，影响可访问性（如屏幕阅读器无法建立术语-解释的关联）和 SEO 结构化理解。
正确嵌套结构：一个 dt 可对应多个 dd
一个术语可能有多种解释角度（如技术定义、使用场景、常见误区），这时允许一个 dt 后跟多个 dd。反之，不能一个 dd 解释多个 dt。
示例：
<dl> <dt>API</dt> <dd>应用程序编程接口，用于不同软件模块间通信的约定集合。</dd> <dd>Web API 通常通过 HTTP 请求与 JSON 响应实现交互。</dd> <p><dt>REST</dt> <dd>一种基于 HTTP 协议设计 Web 服务的架构风格。</dd> </dl>
- 每个
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组合，不要仅靠缩进模拟
真正难的是让设计师和内容编辑都理解：这个缩进不是“样式问题”，而是信息架构的锚点。漏掉它，文档就从结构化变成纯文本了。
