网页新闻板块中标题与内容的HTML语义化标签搭配-html教程-PHP中文网

新闻列表页每条新闻必须用包裹且内部首行为标题，不可用或替代，否则搜索引擎和屏幕阅读器无法识别其为独立可分发内容；发布时间须用，作者信息优先用或内，禁止语义缺失。

网页新闻板块中标题与内容的html语义化标签搭配

<h2></h2> 必须配 <article></article>，不能只用 <div> 或 <code><section></section> 包新闻标题和摘要——否则搜索引擎无法识别这是独立可分发内容，屏幕阅读器也会跳过语义上下文。

新闻标题必须用 `<h2></h2>`（不能是 `<h3></h3>` 或 `<p class="title"></p>`）

新闻列表页的每条新闻标题，语义上是“次级主标题”，应统一用 <h2></h2>。它不是视觉加粗需求，而是结构层级信号：页面 <h1></h1> 是栏目名（如“国内新闻”），每条新闻标题自然降一级为 <h2></h2>。

常见错误现象：

用 <h3></h3> 甚至 <h4></h4> 写新闻标题，导致大纲断裂，Lighthouse 报告“标题层级跳跃”
用 <p class="title"></p> 模拟标题样式，辅助技术完全忽略其重要性
在 <article></article> 外部单独写 <h2></h2>，破坏了“标题属于该新闻单元”的语义归属

正确做法：每个 <article></article> 内部第一行就是 <h2></h2>，且不跳级。

`<article></article>` 是新闻条目的最小语义容器，不是可选装饰

一条完整的新闻（含标题、导语、发布时间、正文片段）必须包裹在 <article></article> 中。它告诉浏览器、爬虫和屏幕阅读器：“这是一篇可独立存在、可被 RSS 订阅、可被分享转发的内容单元”。

使用场景与参数差异：

单条新闻卡片：

<article><h2>…</h2>
<p>导语</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
														src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
													<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
<time datetime="2026-08-25">今天</time></article>

带作者信息的新闻：<article><header><h2>…</h2> <address>记者张三</address></header>…</article>
禁止嵌套：<article> 不能放在 <code><section class="news-list"></section> 里再套一层 <section></section> —— 这会让可访问性工具误判层级

性能影响：无渲染开销，但错误省略会直接降低 SEO 权重分配精度。

摘要、时间、来源等辅助信息要嵌在 `<article></article>` 内部，且用对应语义标签

新闻条目里的非标题内容，不能堆在 <p></p> 里了事。每个字段都有专属语义标签，混用会导致结构模糊。

关键搭配规则：

发布时间必须用 <time datetime="YYYY-MM-DD"></time>，不能用 <span>8月25日</span> —— 否则机器无法提取日期值
作者/来源信息优先用 <address></address>（仅限联系属性），若只是署名可用 <footer></footer>（注意：这是 <article></article> 内部的 <footer></footer>，非页面底部）
导语或摘要用 <p></p> 即可，但不能替代 <article></article> 的包裹作用；若需强调某句，用 <strong></strong> 而非 <b></b>
禁止把整条新闻塞进 <section></section>：它只表示“同一主题下的子模块”，比如“政策解读”“专家观点”这类栏目内部分区，不适用于单条新闻

容易踩的坑：用 <div class="meta"> 包时间+作者，等于主动放弃机器可读性，Lighthouse 会标红“Missing machine-readable date”。 <p>最常被忽略的一点：<code><article></article> 必须有明确的起始和闭合，不能靠 CSS 隐藏或 JS 动态插入来绕过语义完整性——哪怕只显示标题和时间，也要把完整标签结构写全。否则，辅助技术第一次聚焦时就找不到上下文锚点。