关键在于正确使用语义化标签：main包裹唯一核心内容；article用于可独立存在、引用或索引的内容单元；section用于页面内主题性分组；嵌套需符合逻辑层级。
关键在于用对标签：article 表示能单独存在、被引用或推送的内容；section 表示页面内按主题归类的逻辑区块。选错会干扰阅读模式、RSS 抓取和屏幕阅读器识别。
先锁定主干：用 main 包裹核心内容区域
整个页面最核心的信息（比如一篇博文全文、商品详情、新闻正文）必须放在唯一的 <main></main> 标签里。它不嵌套在 <article></article> 或 <section></section> 内，也不重复出现。这样浏览器和辅助技术能第一时间定位主内容。
独立内容单元一律用 article
满足以下任一条件就该用 <article></article>：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 内容可脱离当前页面理解（如复制到 RSS、转发到社交平台仍完整）
- 有自己明确的标题、作者、时间等元数据（可用
<header></header>包裹） - 会被单独索引或推荐（如首页“热门文章”列表里的每一篇）
- 用户评论、论坛回帖、产品卡片——只要每条能被单独引用或排序，就各自套一层
<article></article>
主题性分组统一用 section
当内容是页面整体的一部分、离开上下文就意义模糊时，用 <section></section>：
立即学习“前端免费学习笔记（深入）”；
- 博客正文内部的“背景”“实验方法”“结果分析”小节（每节带
<h2></h2>） - 电商页里的“规格参数”“用户评价”“售后服务”三个模块
- 侧边栏的“相关文章推荐”外层容器（里面每篇推荐仍是
<article></article>） - 避免把导航栏、轮播图、页脚硬套
<section></section>——它们有更精准的语义标签：<nav></nav>、<div>、<code><footer></footer>嵌套要符合逻辑，别颠倒层级
常见合理结构：
-
<main></main>→<article></article>→<section></section>（整篇文章是独立单元，内部章节按主题分） -
<section></section>→ 多个<article></article>（如“最新动态”板块下并列几条新闻） -
<article></article>→<article></article>（一篇文章下的用户回复，每条回复本身也具独立性） - 不要让
<section></section>包着<main></main>，也不要让<article></article>直接做页面顶级容器（除非整页就一篇内容）
-
