结论：header、main、article是语义化底线，header为上下文入口，main为唯一主内容声明，article标识可独立分发内容；三者缺失或误用将直接损害seo与无障碍访问。
直接说结论：不用重写整页，从 header、main、article 三个标签切入，就能让结构语义清晰、SEO可感知、屏幕阅读器可导航——其他标签可以后续补，但这三个是底线。
为什么必须先改 header、main、article
搜索引擎（尤其是 Google）对这三个标签有明确解析优先级：header 被视为页面上下文入口，main 是内容可信度锚点（全页唯一且不可嵌套），article 则触发“可独立分发”信号，直接影响 RSS 抓取和搜索摘要生成。实测中，仅替换这三处的 div，Search Console 的“结构化数据测试工具”就能识别出基础内容区块，而用 section 或 aside 替代则无此效果。
常见错误现象包括：
- 把整个
div class="wrapper"直接改成main，结果包进了导航、侧栏甚至页脚 - 在
article外层又套一层section，导致爬虫误判为“嵌套主题”，稀释主内容权重 - 多个
header并列（如每个article都配一个header），但没配h1–h6，反而破坏标题大纲
main 标签的嵌套红线与容错边界
main 不是“内容容器”，而是“主内容声明”。它必须满足两个硬性条件：全页唯一、不被 article / aside / footer / nav 包裹。一旦违反，部分辅助技术会跳过整个区域，Google 也可能降权该页面的主体索引优先级。
实操建议：
- 检查当前 DOM 中是否存在
<main>...</main>，若无，直接在下第一层插入，包裹真正用户要读的核心块（比如博客正文、商品详情区） - 若已有多个
main，保留最外层那个，其余全部改为section或删掉冗余 wrapper -
main内部可合法包含article、section、header（用于文章标题）、footer（用于文章末尾版权），但不能出现nav或另一个main
什么时候该用 article，而不是 section
判断标准只有一个：这段内容能否被单独订阅、转发或跨站引用？ 比如一篇博客、一条新闻、一个用户评论、一个产品卡片——这些都算。而“关于我们”、“服务流程”、“客户评价汇总”这类聚合型区块，用 section 更准确。
性能与兼容性影响：
- IE11 及更早版本不原生支持
article，但只要不依赖 JS 检测该标签存在性（比如document.querySelector('article')），纯 CSS 和 SEO 均不受影响；加一行document.createElement('article')即可兼容 - 过度使用
article（例如每张 banner 图都包一层）会导致爬虫认为页面信息碎片化，降低单页主题聚焦度 -
article内部必须有明确的 heading（至少h2起），否则屏幕阅读器无法建立导航锚点
别忽略 DOM 顺序对语义的实质性影响
语义化不是贴标签游戏。即使所有标签都用对了，如果 HTML 顺序和视觉流不一致（比如 CSS 把 aside 用 float 或 grid-area 强行提到顶部），屏幕阅读器仍会按源码顺序读取，用户可能先听到侧边广告再听正文标题。
容易被忽略的关键点：
- 移动端响应式中，用
@media重排grid-template-areas时，确保main始终在 DOM 中靠前，不要靠order属性把它拖到后面 -
nav放在header内是常规做法，但如果主导航很长、加载慢，可考虑将nav移到main后、footer前——只要它仍是页面级导航，语义依然成立 -
figure+figcaption必须成对出现，且figcaption要紧邻figure开始标签，否则会被解析为普通段落，失去图文关联语义
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
