必须且只能出现一次，它是页面唯一可信内容入口，代表用户真正要读的核心内容；多个会导致屏幕阅读器跳过后续内容、seo工具忽略非首个，正确做法是外层一个包裹多个。
不做语义化重构，就别谈前端架构升级——header、main、article 这几个标签用错位置，后续所有组件化、无障碍、SEO 优化都会打折扣。
为什么 main 必须且只能出现一次
浏览器和屏幕阅读器把 main 当作页面“唯一可信内容入口”。它不是视觉容器，而是语义断言：这里才是用户点进来真正要读的东西。
- 多个
main会让辅助技术困惑，部分读屏软件会跳过后续的main或报错 - SEO 工具（如 Google 的结构化数据测试工具）会忽略第二个及以后的
main，导致核心内容不被识别 - 常见错误：首页放三篇博客摘要，每篇都套
main—— 正确做法是外层一个main，内部用article区分独立内容 - 检查方式：在 DevTools 的 Elements 面板里搜索
<main>，结果必须只有一条匹配</main>
header 和 nav 到底谁包谁
header 是上下文容器，nav 是功能容器，二者不是父子关系绑定项。
- 整页
header可以包含nav（比如网站顶部导航），但nav不必非得塞进header—— 面包屑、页脚导航也合法用nav - 每个
article或section可以自带header（比如文章标题+发布时间），里面再嵌nav做文内目录也完全合规 - 反模式：把登录框、广告横幅、客服入口全塞进同一个
header—— 它们不属于“上下文介绍”，应拆到aside或普通div - 关键判断标准：这个区域是否帮助用户理解“我现在在哪、这是什么内容”？如果是，才考虑
header
什么时候该用 section 而不是 article
article 表示可独立存在、可被转载/订阅的内容单元；section 表示有主题但依附于当前文档的逻辑区块。
- 博客正文里的“引言”“技术原理”“实操步骤”“总结” —— 每一块用
section，因为它们共同构成一篇文章，不可单独分发 - 首页上的“最新动态”“热门产品”“客户评价”模块 —— 各自用
section，因为它们主题明确但不构成独立内容实体 - 如果某个区块带
h1或能单独出现在 RSS 订阅源里（比如一篇新闻稿），优先用article - 滥用
article的后果：搜索引擎可能误判为多个独立页面，稀释主页面权重
CSS 选择器迁移时最容易翻车的三处
重构后样式崩了，往往不是语义标签本身的问题，而是旧 CSS 依赖了非语义结构。
-
div.header→ 必须改成header，否则样式失效；若同时存在页面级和文章级header，需靠层级或 class 区分 -
div.content > p→ 改成main > p或article > p，注意main下可能还有section或aside，直接子代选择器会漏匹配 -
.sidebar类名保留没问题，但若原样式写的是div.sidebar，而你已改用aside，就得同步更新选择器，否则侧边栏空白
重构不是换标签游戏，是重新校准 HTML 结构与 CSS、JS、辅助技术之间的契约。最常被忽略的点：嵌套层级变了，main 下直接放 article 是安全的，但放 section 再包 article 就多了一层 DOM，JS 查询或动画性能可能微降，得实测验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
