网页中如何定义术语表_dl/dt/dd标签构建描述性列表结构-html教程-PHP中文网

语义化html指使用具有明确含义的html标签描述内容结构，如、、正确构建术语表，提升可访问性、seo和可维护性；应仅含短语级内容，避免嵌套等块级元素，以确保读屏器准确识别术语。

网页中如何定义术语表_dl/dt/dd标签构建描述性列表结构

直接用 <dl></dl>、<dt></dt>、<dd></dd> 就能语义正确地构建术语表，比用 <ul></ul> + 缩进或表格更清晰、更可访问，也更容易被搜索引擎和读屏器理解。

为什么不能把 `<dt></dt>` 套在 `` 里

HTML5 允许 <dt></dt> 包含块级元素，但实际中这么做会破坏语义结构，导致部分读屏器跳过或误读术语。比如把 <dt>API</dt> 写成这样，屏幕阅读器可能只朗读“段落”，而不是“API”这个术语本身。

<dt></dt> 应该只包含短语内容（如纯文本、、<code> 等行内元素）
如果术语需要换行或强调，用   或 CSS 控制，别加 、<div> <li>浏览器默认渲染时，<code><dt></dt> 是块级，天然独占一行，加  反而多一层嵌套干扰流式阅读

一个 `<dt></dt>` 对应多个 `<dd></dd>` 的典型场景

常见于同义词解释、多角度定义或参数说明——比如 API 文档里一个字段名对应类型、默认值、是否必填三段描述。

结构合法：<dt>timeout</dt> <dd>number</dd> <dd>3000</dd> <dd>required</dd>
不要为了“对齐”强行拆成三个 <dt></dt>，那会丢失“这三项都属于 timeout”的语义关联
读屏器会依次朗读 “timeout，类型：number，默认值：3000，是否必填：required”，逻辑连贯

用 CSS Grid 实现紧凑双列布局的要点

默认 <dd></dd> 的缩进是靠 margin-left 实现的，容易受父容器影响；用 Grid 能精准控制术语与描述的位置关系，且响应式友好。

关键样式：dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25em 1em; }
dt { grid-column: 1; font-weight: 600; } 显式指定术语列，避免依赖文档流顺序
dd { grid-column: 2; margin: 0; } 清除默认 margin，防止叠加错位
窄屏下用媒体查询还原为单列：@media (max-width: 480px) { dl { grid-template-columns: 1fr; } dt, dd { grid-column: 1; } }，确保 dt→dd 自然上下衔接

哪些地方最容易被忽略

一是 <dl></dl> 必须作为直接容器——所有 <dt></dt> 和 <dd></dd> 都得是它的子元素，中间插个 <div> 或 <code> 就破坏了语义树；二是多个 <dt></dt> 共享一个 <dd></dd> 虽然合法（比如同义词共用一个释义），但实际中极少用，一旦用错顺序，读屏器可能把后一个 <dt></dt> 当作前一个的补充而非独立术语。