常用HTML语义化标签速查与实践指南-html教程-PHP中文网

用于独立可分发的内容（如博客、新闻），仅作依赖上下文的主题分组；article可嵌套section，但section不可包裹多个独立article，且section必须含h1–h6标题。

常用html语义化标签速查与实践指南

<main></main> 必须且只能出现一次，<article></article> 和 <section></section> 的嵌套关系不能反着来——这是最容易被忽略的硬性规则，不是可选建议。

什么时候该用 `<article></article>` 而不是 `<section></section>`

关键看内容是否「独立可分发」：<article></article> 内容能单独被 RSS 抓取、被搜索引擎作为独立条目索引；<section></section> 只是逻辑分组，脱离上下文就失去意义。

<article></article>：博客正文、新闻稿、用户评论、产品卡片（带标题+摘要+发布时间）
<section></section>：文章里的「背景介绍」「技术原理」「使用示例」等章节；首页的「热门推荐」「最新动态」区块
常见错误：把整个首页所有模块都包进 <section></section>，却不加标题——<section></section> 没有 <h1>–<h6></h6> </h1> 就是语义残缺

`<aside></aside>` 不是侧边栏的同义词

<aside></aside> 表达的是「与当前内容间接相关」，不是「物理位置在右边」。它可能出现在文章中间、底部，甚至移动端折叠后收进汉堡菜单。

适用场景：博客文末的作者简介、技术文档中的术语解释框、新闻页里的背景资料卡片
不适用场景：全站通用的广告位、导航菜单、页脚链接列表——这些该用 <footer></footer> 或 <nav></nav>
性能提示：某些 SSR 框架会为 <aside></aside> 单独做懒加载判断，因为它通常非首屏核心内容

`<figure></figure>` 和 `<figcaption></figcaption>` 必须成对出现

单独用 <figure></figure> 包图片，但没写 <figcaption></figcaption>，等于主动放弃可访问性和 SEO 价值。浏览器和屏幕阅读器依赖这对标签建立媒体与说明的绑定关系。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

<figure></figure> 不限于图片：代码块、图表、引用块、甚至嵌入的 <video></video> 都适用
<figcaption></figcaption> 必须是 <figure></figure> 的第一个或最后一个子元素，否则会被部分读屏软件忽略
错误写法：<figure><img><p>这是说明</p></figure> —— <p></p> 不是 <figcaption></figcaption>，语义断裂

真正难的不是记住每个标签怎么写，而是每次写之前问一句：这个区块如果被抽出来单独发到 Twitter 或 RSS，它还成立吗？成立就用 <article></article>，不成立就看它属于哪一级逻辑分组——这个判断比查文档花的时间更多，也更关键。