必须且只能出现一次，是页面“当前视图核心内容”的唯一语义锚点，不可嵌套在等元素内，也不可重复使用，否则破坏可访问性与seo。
main 标签必须唯一且不能嵌套在 article 或 aside 里
很多开发者以为 main 是个“高级 div”，可以多处使用或随意包裹——这是最常踩的结构性错误。浏览器和屏幕阅读器会把第一个 main 当作页面核心内容入口，后续的会被忽略；若把它塞进 article 或 aside，等于告诉辅助技术“主内容是侧边栏的一部分”，直接破坏导航逻辑。
实操建议：
-
main在整个文档中只能出现一次，且应作为的直接子元素（或紧贴在header/nav后） - 不要用
main包裹某篇文章的局部区域——那是article的职责 - 如果页面有多个独立内容区块（如首页含三篇推荐文章），每个用
article，整体仍由一个main统一包裹 - 检查方式：运行
document.querySelector('main')，结果应为单个元素；若返回null或多个，结构已出问题
section 和 article 的边界到底怎么划
section 不是“带标题的 div”，article 也不是“长得像文章的块”。它们的区分关键在于**可独立分发性**：能被 RSS 抓取、单独邮件推送、脱离当前页面仍语义完整的内容，才配用 article；而 section 是主题性分组，依赖上下文存在。
常见误判现象：
- 把用户评论区整体包成
article——错，每条评论才是独立article，整个区域该用section+h2 - 把“关于我们”“服务流程”“客户案例”三个模块全写成
article——错，它们共属“公司介绍”主题，应统一放在一个section下，各自用h3标题 - 在
article内部再套section——对，只要内部有明确子主题（如“背景”“方法”“结论”）就合理
nav 标签不是所有链接集合的通用容器
看到一堆 a 就套 nav，是语义污染的典型表现。nav 只用于**主导航路径**——即用户首次进入页面后，为快速跳转到其他一级功能/频道所依赖的链接集合。它不负责面包屑、页脚友情链接、登录态操作按钮，更不负责搜索结果里的相关链接。
判断依据很简单：
- 能否用键盘
Tab进入后，按Enter直接完成主要页面跳转？能 → 适合nav - 是否出现在页面固定位置（顶部/左侧），且全站一致？是 → 倾向
nav - 是否包含“首页”“产品”“关于”这类站点级入口？是 → 几乎必用
nav - 如果是“返回上一页”“分享到微博”“打印本页”这类操作链接？用
footer或普通div，别硬塞nav
header 和 footer 的嵌套规则容易被忽略
header 和 footer 可以多次出现，但每次出现都必须服务于**其父级语义容器**。比如一个 article 可以自带 header（含标题、作者、发布时间），也可以自带 footer（含标签、编辑时间）；但这些子级 header 不能包含整站导航——那是页面级 header 的事。
实操红线：
- 页面级
header内可放nav，但article级header里放nav属于越界（除非是该文章自己的目录导航） -
footer不能出现在header或nav内部——结构上无意义，解析器可能降级处理 - 多个
section共享同一组底部操作（如“点赞”“收藏”按钮），不要每个section都套footer，用普通div+ 语义化 class 更诚实 - 检查工具：用 Chrome 的 Lighthouse 运行 Accessibility 审计，若提示 “
footernot scoped to its sectioning root”，就是嵌套违规了
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
