博客文章页应使用包裹正文，内含标题及组织的元信息，必须带datetime属性，评论区用而非。
博客文章页该用哪些语义化标签
HTML5 的 <article></article> 是唯一真正适合包裹整篇博客正文的容器，不是 <section></section>，也不是 <div>。它明确表达“独立、可复用、可分发的内容单元”，搜索引擎和读屏器都依赖这个语义做内容判定。
<p>常见误用：<code><section></section> 被当成“分块容器”滥用——它只适用于文章内部有逻辑子章节时（比如「背景」「实验过程」「结论」），而非替代 <article></article>。
-
<header></header>放在<article></article>内部，包裹标题<h1></h1>、作者、发布时间等元信息 -
<time datetime="2024-03-15">2024年3月15日</time>必须带datetime属性，否则对机器不可读 -
<footer></footer>可用于文章末尾的标签、版权声明、相关链接，但不要放导航栏——那是页面级<footer></footer>的职责
标题层级与嵌套是否必须从 h1 开始
单篇文章页里，<article></article> 内部的标题应从 <h1></h1> 开始，哪怕页面已有全局 <h1></h1>（如网站 Logo）。因为 <article></article> 创建了新的大纲上下文，浏览器和辅助技术会将其视为独立文档片段处理。
反例：<h2></h2> 作为文章主标题会导致结构断裂，SEO 工具可能降权，屏幕阅读器用户无法准确定位内容主干。
- 文章内小节用
<h2></h2>～<h6></h6>，严格按逻辑深度递进，不跳级 - 避免用
<h1></h1>做样式控制——改用 CSS 类；语义和样式必须分离 - 如果 CMS 输出强制生成
<h2></h2>主标题，用aria-labelledby或显式<h1></h1>包裹来修复语义
如何组织文章元信息（作者、时间、分类）
元信息不属于正文内容，但又强关联文章主体，最佳位置是 <article></article> 的 <header></header> 内，用无序列表或定义列表呈现，比堆砌 <span></span> 更健壮。
别写成：<span class="author">张三</span><span class="date">2024-03-15</span>——这没有语义，也无法被结构化数据提取器识别。
- 用
<dl></dl>+<dt></dt>/<dd></dd>组织多字段元信息，例如<dt>作者</dt> <dd>张三</dd> -
<time></time>必须包含机器可读的datetime，格式为YYYY-MM-DD或完整 ISO 8601（如2024-03-15T14:30:00+08:00） - 分类和标签建议用
<ul class="tags"></ul>，每个<li>内用<a href="/tag/xxx"></a>，保持可点击、可爬取
评论区要不要放进 article 标签里
不要。评论是用户生成内容（UGC），与原始文章不构成同一语义单元，也不具备独立分发价值。把它放进 <article></article> 会污染内容边界，干扰 RSS 解析和内容聚合。
正确做法：用 <section aria-labelledby="comments-heading"></section> 包裹，并设 <h2 id="comments-heading">评论（12）</h2>。这样既保持结构清晰，又支持无障碍跳转。
- 若评论支持嵌套回复，每条回复用独立
<article></article>，体现其作为“独立评论单元”的语义 - 避免把整个评论区塞进一个
<div> 后再靠 JS 渲染——初始 HTML 就该反映基本结构 <li>加载更多评论时，新插入的 <code><article></article>应触发aria-live="polite"提示更新
实际项目中最容易被忽略的是
<time></time> 的 datetime 属性缺失，以及把 <article></article> 当成视觉容器滥用——它一旦出现，就代表一个可被单独订阅、分享、存档的内容实体，不能妥协。
