HTML中dt与dd标签_HTML自定义列表项与描述关系-html教程-PHP中文网

dt 和 dd 必须同为 dl 的直接子元素且平行，不可嵌套；一个 dt 可对应多个 dd，多个 dt 也可共用一个 dd；dd 默认有 margin-top 但非语义换行，清除样式后需手动设置间距；dl 仅适用于定义关系场景，禁用于表格或导航。

html中dt与dd标签_html自定义列表项与描述关系

dt 和 dd 必须同级，不能嵌套

很多人写错成 <dt>CPU</dt> <dd></dd> <dt>主频</dt> <dd>3.2GHz</dd>，这是非法结构。HTML 规范明确要求 <dt></dt> 和 <dd></dd> 都是 <dl></dl> 的直接子元素，彼此平行，不存在父子关系。

常见错误现象包括：浏览器渲染异常、无障碍阅读器读不出描述、CSS 选择器失效（比如 dt + dd 不触发）。

<dl></dl> 内只允许出现 <dt></dt> 和 <dd></dd>，不能有 <p></p>、<div> 等包裹 <li>一个 <code><dt></dt> 可以对应多个 <dd></dd>（如多角度解释同一术语）
多个 <dt></dt> 也可共用一个 <dd></dd>（如并列术语共享同一说明）

dd 标签不自动换行，但默认有 margin-top

视觉上 <dd></dd> 像是“缩进+换行”，其实是浏览器内置样式给的 margin-top: 0.61em 和 margin-bottom: 0.61em，不是语义换行。如果你清除了所有默认样式（比如用了 reset.css），<dd></dd> 会紧贴 <dt></dt> 显示，甚至重叠。

使用场景中要注意：做响应式术语表、FAQ 折叠面板时，别只靠默认 margin 控制间距；用 Flex 或 Grid 布局时，<dd></dd> 的 margin 可能干扰对齐。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

检查是否被 CSS 重置影响：用浏览器开发者工具看 computed margin-top
需要精确控制时，显式设置 dd { margin: 0.5em 0; } 比依赖默认值更可靠
若用 display: flex 包裹 <dl></dl>，记得 dd 的 margin 不会自动参与 flex 分布

多个 dd 对应一个 dt 是合法且常用

比如解释“HTTP”时，可能需要分别说明协议类型、端口、状态码机制——这三个都该用独立的 <dd></dd>，而不是塞进一个 <dd></dd> 里用 <br> 分隔。这样既利于语义化，也方便后续用 JS 单独操作某条解释，或让屏幕阅读器逐条朗读。

错误做法是把多条描述硬塞进单个 <dd></dd>：<dd>应用层协议<br>默认端口80<br>基于请求-响应模型</dd>。这破坏了可访问性与结构化数据提取能力。

搜索引擎和知识图谱更倾向从多个 <dd></dd> 中抽取结构化字段
WCAG 要求每条描述语义独立，避免用 <br> 模拟列表
Vue/React 中映射数组生成定义列表时，确保每个描述项生成独立 <dd></dd>

dl/dt/dd 不适合模拟表格或菜单导航

有人用 <dl></dl> 实现“左侧标签 + 右侧值”的两栏布局，或者当垂直菜单用，这是误用。虽然能显示，但语义断裂：没有“定义关系”的内容强行套用定义列表，会让辅助技术困惑，也影响 SEO 权重分配。

典型反例：<dl> <dt>用户名</dt> <dd>admin</dd> <dt>邮箱</dt> <dd>user@example.com</dd> </dl> —— 这本质是键值对表单数据，应该用 <table>（带 <code>role="grid"）或语义化 <form></form> + <label></label>。