main 标签必须唯一且直接位于 body 下，不可嵌套在 article、aside、footer 等容器内；section 需有标题且表主题区块，article 表可独立分发内容；aside 依父级定义服务范围；header/footer 可多次出现但须归属明确。
main 标签必须唯一且不能嵌套在其他语义容器内
浏览器和辅助技术依赖 main 作为页面“核心内容锚点”，一旦出现多个或嵌套在 article、aside、footer 内，就会破坏内容可访问性与 SEO 解析逻辑。
-
main只能直接位于body下，或作为body的直接子元素存在 - 不要写
<article><main>...</main></article>—— 这是常见错误，main不是“文章主体容器”，而是整页唯一主内容区 - 若页面含多篇博客，正确结构是：
main包裹一个section（带<h2>Vue 教程</h2>），再放若干article - 某些 CMS 或框架自动生成重复
main，需检查 DOM 输出，用开发者工具的“Accessibility”面板验证是否报错Multiple main landmarks
section 和 article 的区分关键在“可复用性”而非视觉区块
很多人按样式切块决定用 section 还是 article，结果导致语义混乱。真正判断依据是：该内容能否脱离当前页面独立存在、被 RSS 抓取、单独打印或分享。
- 用
article：博客正文、新闻稿、用户评论卡片、产品卡片（含标题+描述+发布时间） - 用
section：“关于我们”页里的“团队介绍”“发展历程”“企业文化”——它们主题相关但不可单独分发 - 避免把整个首页塞进一个
section；也不要给每张 banner 图配一个section—— 没有h2–h6标题的section是无效语义 -
section内可嵌article，但article内不应再套section来组织段落——那是div或纯文本层级的事
aside 的位置决定其服务范围，不是“右边那个栏”
aside 的语义是“附属但相关”，它的父级容器直接定义了它服务的对象：在 article 内，它是对本文的补充；在 main 旁，它是对整页主体的延伸。
- 文章内术语解释、引用来源、作者简介，应放在对应
article内部，紧邻相关内容 - 全站侧边推荐、广告、分类导航，应与
main并列（同级兄弟），而非包裹在main里 - 不要用
aside替代nav：导航链接集合必须用nav，哪怕它出现在右侧——nav表达功能，aside表达关系 - 屏幕阅读器会把
aside当作可跳过区域，如果把它误放在main内部又没合理标记，关键信息可能被忽略
header 和 footer 可多次出现，但必须有明确归属
header 不等于“页面顶部”，footer 也不只是“页面底部”。它们是内容单元的元数据容器，嵌套层级即归属关系。
- 每个
article可自带header（含h1–h6+time+address），表示这篇内容自身的头信息 -
footer出现在article底部时，放“编辑于 2026-06-20”“标签：前端、HTML”；出现在body级别时，才放版权、备案号 - 避免在
section里无意义地加header：如果里面只有个h2，那这个h2本身就是section的标题，不需要额外header包裹 -
header内不要塞主导航——那是nav的职责；nav也不该被包进header当“装饰”，除非它确实是该区块的导航（如某产品模块内的 tab 切换）
main 的唯一性校验和 section 必须配标题这两条。结构一旦偏离，机器读不懂，人也难维护。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
