博客正文必须用包裹，不可用替代；须带iso格式datetime属性；分页链接禁用

用 <article></article> 包裹每篇博客正文，别用 <div> 硬套 <p>博客页面本质是「多篇文章的集合」，每篇独立内容必须用 <code><article></article> 标识。搜索引擎和屏幕阅读器靠这个判断内容边界，<div> 没语义，等于告诉机器“这堆 HTML 是一团未知物”。 <p>常见错误：整页用一个 <code><div class="post"> 包到底，或者把标题、作者、正文全塞进同一个 <code><section></section> 里。

• <article></article> 内可嵌套 <header></header>（放标题/时间/作者）、<footer></footer>（放标签/分享链接），但不要跨文章复用
• 如果博客有「编辑推荐」「读者评论」等附属内容，用 <aside></aside>，别塞进 <article></article> 里
• 多个 <article></article> 并列时，建议外层用 <main></main> 包裹，表示这是页面主体内容

<time></time> 必须带 datetime 属性，否则语义失效

写 <time>2024-05-20</time> 是无效的——浏览器无法解析日期格式。必须用 ISO 8601 格式写进 datetime 属性，视觉文本可以按中文习惯显示。

错误示例：<time>5月20日</time>（机器读不出这是哪年哪月）

正确写法：<time datetime="2024-05-20">2024年5月20日</time>

• 如果文章有更新时间，用两个 <time></time>，分别加 datetime 和 class="updated" 标识
• 避免用 <span></span> + JS 渲染时间，语义标签优先于动态生成
• RSS 抓取和 SEO 提取都依赖 datetime 值，不写等于丢掉发布时间信息

<nav></nav> 只用于主导航，分页和侧边栏别乱塞

博客常见的「上一篇 / 下一篇」或「第1页 / 第2页」链接，不是 <nav></nav> 的适用场景。W3C 明确定义：<nav></nav> 是“主要导航区块”，比如顶部菜单或分类入口，而非内容流中的辅助跳转。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

分页链接建议用 <footer></footer> 或 <div role="navigation">（需要 ARIA 补充）；侧边栏导航用 <code><aside></aside> 更合适。

• 误用 <nav></nav> 会导致屏幕阅读器重复播报「导航区域」，干扰用户聚焦正文
• 如果博客首页有「热门分类」+「最新文章」+「分页」三组链接，只把第一组放进 <nav></nav>
• 用 <nav aria-label="文章分页"></nav> 属于滥用——aria-label 不能覆盖语义错误

<figure></figure> 和 <figcaption></figcaption> 是图片标配，但别为了语义硬套

博客里的配图、代码截图、数据图表，只要具有说明性（即去掉图，正文逻辑不完整），就必须用 <figure></figure> 包裹，并用 <figcaption></figcaption> 写简短说明。纯装饰性图片（如背景分割线）用 CSS background-image，不进 HTML。

容易踩的坑：

• 把整段文字描述 + 图片一起塞进 <figure></figure> ——<figcaption></figcaption> 只能是直接子元素，且只能有一个
• 在 <figure></figure> 里放多个 <img> 却不加 <figcaption></figcaption> ——语义不完整，AT 工具会忽略图的存在
• 用 <figure></figure> 包代码块（<pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt;）没问题，但需确保 &lt;code&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;/code&gt; 描述的是这段代码的作用，不是“代码如下”这种废话</pre>

语义化不是贴标签比赛，关键在是否真实反映内容关系。比如作者头像属于 <aside></aside> 里的元信息，放进 <article></article> 的 <header></header> 就错位了。