<article>必须包裹整篇新闻而非仅正文段落，因为其语义边界是“可独立分发的内容单元”，需包含标题、导语、正文、作者、时间、来源等全部关键信息，缺一则导致SEO降权、读屏跳过、RSS拒收。
新闻类网站用语义化标签不是为了“看起来更规范”，而是为了让标题、导语、正文、来源、发布时间这些关键信息被搜索引擎和屏幕阅读器准确识别——否则 SEO 掉权、读屏跳过正文、结构被误判都是大概率事件。
为什么 <article> 必须包裹整篇新闻，而不是只包正文段落
很多新闻页把 <article> 只套在 <p> 或 <div class="content"> 外面，漏掉标题、作者、时间、来源等元信息。这会导致：
– 屏幕阅读器无法将标题与正文建立语义关联，用户得手动滚动听完整块内容才能确认是不是目标文章
– RSS 抓取器或 Google 新闻索引时，可能因缺失 <header> 内的 <h1> 和 <time> 而降权甚至拒收
– <article> 的语义边界是“可独立分发的内容单元”，新闻标题+导语+正文+署名+时间+来源，缺一不可
正确做法：
– 全文（含 <h1>、<header> 里的作者/时间、<section> 分章节、<footer> 的来源说明）必须都在同一个 <article> 内
– 若页面含多条新闻（如首页列表），每条都应是一个独立的 <article>，不能共用一个外层容器
<section> 在长报道中怎么用才不污染大纲
新闻里常有「背景」「专家观点」「数据图解」「延伸阅读」等模块，容易滥用 <section>。但 <section> 不是“视觉分隔符”，它必须自带标题且构成逻辑闭环：
立即学习“前端免费学习笔记（深入）”；
- 错误：用
<section><p>据记者调查…</p></section>—— 没标题、不可独立、无语义锚点 - 正确：用
<section><h3>背景：政策出台历程</h3><p>2024年起…</p></section>—— 有<h3>，屏幕阅读器可跳转，Google outline 能识别为子节点 - 若模块无标题（如纯图片图注、单行数据卡片），改用
<div role="group" aria-label="现场照片说明">，避免生成无效大纲项
时间、作者、来源这些元信息该放哪，<time> 和 <address> 别乱套
新闻可信度依赖元信息结构化表达，但常见错误是把所有信息塞进 <footer> 或全用 <span>：
-
<time datetime="2026-08-25T14:30">8月25日 14:30</time>必须出现在<article>的<header>或紧邻<h1>后，不能藏在<footer>底部——否则 Google News 认为发布时间不可信 - 作者名用
<address>仅限联系场景（如“编辑部邮箱”），普通署名直接用<p class="byline">记者 张明</p>即可；若需机器识别，加rel="author"：<a href="/author/zhangming" rel="author">张明</a> - 信源标注（如“据新华社”）建议放在
<article>的<footer>，并用<cite>包裹机构名：<footer><cite>新华社</cite>供稿</footer>
多图新闻里 <figure> 和 <figcaption> 的硬性要求
图文混排新闻中，每张图都必须配 <figure>，否则 alt 文本孤立、语音朗读顺序错乱、SEO 图片权重归零：
-
<figure>必须包裹<img>+<figcaption>，不能只包图；<figcaption>要写实质描述（如“图：2026年防汛演练现场，救援艇抵达堤岸”），而非“图1”“示意图” - 若图含数据图表，
<figcaption>后追加<details><summary>查看原始数据</summary>...</details>，兼顾可访问性与信息密度 - 轮播图组件里每个
<img>都要单独<figure>，不能整个轮播容器套一个 —— 否则屏幕阅读器无法逐图导航
最易被忽略的是：新闻页顶部 banner 图、头图，哪怕只是装饰性大图，只要出现在 <article> 内，就必须走 <figure> 流程；若纯装饰，alt="" + CSS 背景图替代，别留空 <img>。
