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