<dl>不适合做新闻列表，因其语义表示术语与定义的对应关系，而新闻条目是并列关系；推荐用<article>包裹每条新闻，内嵌<figure><figcaption>处理图文，标题用<h3>，摘要用<p>。
用 <dl> 做新闻列表的图文摘要并不推荐——它语义上表示“定义列表”，不是为新闻流设计的。真正合适的是语义清晰、结构明确的组合：用 <article> 或 <section> 包裹每条新闻，内部用 <figure> + <figcaption> 处理图与文，标题用 <h3> 或更合适的层级，摘要用 <p>。 如果非要结合 <dl>，只能在特定场景下“借用”其结构逻辑，但会牺牲可访问性和SEO效果。
为什么 dl 不适合做新闻列表
<dl> 的本意是描述术语（<dt>）与定义（<dd>）的对应关系，比如词汇表、参数说明。新闻条目之间是并列关系，不是“术语-解释”结构。屏幕阅读器会按定义列表播报，导致“标题…（停顿）…图片说明…（停顿）…摘要…”这种不符合实际阅读逻辑的节奏。
推荐的图文摘要结构（语义正确）
每条新闻用独立语义容器，兼顾结构、样式和无障碍：
-
外层用
<article>：表示独立、可复用的内容单元（符合新闻条目本质） -
图片部分用
<figure><img><figcaption></figcaption></figure>：明确图与说明的归属关系，<figcaption>可放来源、时间或简要图说 -
标题用
<h3>（或根据上下文选<h2>）：保持文档大纲合理 -
摘要用
<p>：语义准确，且方便后续加链接或高亮关键词
如果硬要结合 dl（仅限特殊需求）
仅当后台数据天然以“键值对”形式输出（如 JSON 中 {"title":"...", "image":"...", "summary":"..."}），且前端必须映射为 HTML 时，可临时用 <dl> 模拟字段分组，但需额外补足语义：
立即学习“前端免费学习笔记（深入）”；
- 每个新闻条目用一个
<div>包裹，内部用<dl> -
<dt>写字段名（如标题、配图），<dd>放对应内容 - 必须添加 ARIA 标签**：例如
<dl aria-label="新闻《XXX》摘要">，否则辅助技术无法识别这是新闻项 - 图片仍建议保留在
<figure>内，不要直接塞进<dd>
一个简洁可用的示例（推荐写法）
无需复杂标签，清晰结构就能支撑样式和交互：
<article><figure>
<img src="news1.jpg" alt="会议现场，多位专家围坐讨论">
<figcaption>图：2024人工智能峰会现场 <time datetime="2024-04-10">4月10日</time></figcaption>
</figure>
<h3>AI治理框架正式发布</h3>
<p>新规则强调透明度与人工干预权，将于三季度试点实施。</p>
</article>
