写帮助中心，把术语和解释用三个 div 排成两列，SEO 同事说语义不对。改成 dl 以后，默认样式左缩进一大截，手机上挤成一团。
嵌套关系只有一种
dl 里面放 dt 和 dd，dt 是术语，dd 是解释。一个 dt 可以对应多个 dd，多个 dt 也可以共用一个 dd，但 dt 不能塞进 dd 里，dl 的直接子元素也不该是 div。HTML5 允许用 div 包一组 dt 和 dd，用于样式分组，这是少数例外。
默认样式从哪来
浏览器给 dd 加了 margin-left: 40px，dl 有上下 margin。要两列布局，先 margin: 0，再用 grid。dl 设 display: grid，grid-template-columns: 120px 1fr，dt 和 dd 就会自动排。多个 dt 共用一个 dd 时，grid 会把它们拆开，需要额外包一层。
dl { display: grid; grid-template-columns: 120px 1fr; gap: 8px 16px; } dd { margin: 0; }什么时候该用它
术语表、FAQ、参数表、价格说明都合适。纯排版的两栏文字用 div 就行，别为了语义硬套。表格类的多行多列数据还是 table，dl 不适合承载复杂表格。
无障碍上的细节
屏幕阅读器会把 dl 读成列表，dt 和 dd 的关系能正确播报。嵌套层级别超过一层，读起来会乱。dd 里再放列表没问题，但别放标题，结构会冲突。
多个词共用一个解释的写法
网格布局在 dt 比 dd 多时，用 subgrid 更稳，但兼容性要查。价格表里常出现三档规格对应同一段说明，按规范可以写成三个 dt 后跟一个 dd。Safari 16 之前不认 subgrid，可以直接给 dd 设 grid-column: 1 / -1 兜底。
反过来的情况是一个术语对多条解释，比如退货政策分三条，就写一个 dt 跟三个 dd，每条单独 p 也行，但别在 dd 里再嵌 dl，层级一深读屏软件就念不清。dt 里只能放短语，塞 p 或 h3 会让语义断掉。
和 table 的取舍
参数表如果每行是固定字段、每列含义相同，用 table 加 th scope 更合适，排序和复制到 Excel 都不折腾。dl 适合字段名长短差异大、行数不定的场景，比如常见问题。判断标准很简单：列头有名字就 table，没有就用 dl。
用它之前先问一句：这是词和解释的关系吗。是就用，不是就换标签。