dl是专为术语与解释语义配对设计的标签，必须确保dt和dd均为dl的直接子元素；支持一词多义（多个dd）和一义多词（多个dt共用一个dd）；推荐用CSS Grid布局替代默认缩进以保障可访问性与响应式效果。
dl 不是用来“做两栏布局”的，它是专为术语与解释的语义配对设计的。如果你只是想左对齐标题、右对齐说明，用 grid 或 flex 更稳妥；但如果你真在写术语表、API 参数、FAQ 或配置项，dl 是唯一能同时满足语义正确、读屏器可读、SEO 友好这三点的原生方案。
dt 和 dd 必须是 dl 的直接子元素，中间不能插任何容器
浏览器会把嵌套在 div、p 或其他标签里的 dt 或 dd 自动“拎出来”，导致 DOM 结构断裂——样式可能还凑合，但读屏器会跳过术语，或把解释当成孤立段落朗读。
- ✅ 正确：
<dl><dt>timeout</dt><dd>number</dd></dl> - ❌ 错误：
<dl><div><dt>timeout</dt></div><dd>number</dd></dl>（div会被移出dl） - ⚠️ 隐患：某些 CSS 框架（如 Normalize.css）默认清掉
dd的margin-left，缩进一消失，整个列表就失去视觉和语义锚点，必须手动补上区分逻辑
一个术语多个解释？用连续多个 dd，别塞进一个 dd 里
比如 “404” 既要说明含义，又要列常见原因，还要给修复建议——这不是排版问题，而是语义层级问题。多个 dd 表示并列解释项，读屏器会逐条播报，且支持无障碍焦点顺序；而把三段文字塞进一个 dd 再用 p 分隔，等于主动放弃结构化语义。
- ✅ 推荐：
<dt>404</dt><dd>请求的资源未找到。</dd><dd>常见原因：URL 错误、页面被删、路由未配置。</dd><dd>修复建议：检查拼写、确认资源路径、验证服务端路由。</dd> - ❌ 不推荐：
<dd><p>含义…</p><p>原因…</p><p>建议…</p></dd> - 注意：
dd内允许p、ul、甚至<pre>，但前提是它服务于解释本身，而不是替代dd的语义职责
多个术语共用一个解释？连续写 dt，再跟一个 dd
这是 HTML5 明确支持的“共享定义”模式，适用于同义词（如 DOM / 文档对象模型）、中英文参数名（timeout / 超时时间），或一组概念（HTML、CSS、JavaScript）共属“前端核心技术”。
- ✅ 合法：
<dt>DOM</dt><dt>文档对象模型</dt><dd>浏览器将 HTML 解析成的树状 JavaScript 对象结构。</dd> - ⚠️ 顺序不能错：多个
dt必须连续，且都紧挨着同一个dd；如果中间插了别的dd或dt，语义归属就断了 - 别为了“看起来整齐”把
dt套span或加空格——读屏器会朗读所有可见文本，包括多余空格，影响理解效率
用 CSS Grid 控制布局时，别破坏语义流
默认缩进靠 margin-left 太脆弱，尤其在 RTL（从右向左）语言或响应式场景下。用 display: grid 替代是更现代、更可控的做法，但要注意两个关键点：不能把 grid 直接加在 dl 上破坏父子关系，也不能让 dt 和 dd 在视觉上脱离配对逻辑。
- ✅ 安全写法：
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25em 1em; } dt { grid-column: 1; font-weight: 600; } dd { grid-column: 2; margin: 0; } - ⚠️ 避免：
dl { display: flex; }——部分辅助技术会丢失dt和dd的归属关联 - 窄屏适配必须还原为单列流：
@media (max-width: 480px) { dl { grid-template-columns: 1fr; } dt, dd { grid-column: 1; } }，否则dd可能跑到屏幕外或堆叠错乱
最常被忽略的不是怎么写对标签，而是写之前先问一句：这个“术语”能不能被单独抽出来放进词典？如果答案是否定的，dl 就不该出现——它不处理动态内容、不承载交互控件、也不适合长篇说明。用错一次，修复成本远高于一开始选对结构。
