主内容区必须用 main，不能用 section；main 是页面唯一主干，承载博客正文、产品详情等核心信息，须为 body 直接子元素且不可嵌套于 article、aside 或 nav 中；section 仅用于 main 内部的主题分组，如“用户评价”“技术参数”。
主内容区该用 main 还是 section？
页面中真正承载核心信息的区块，比如一篇博客正文、一个产品详情页主体，必须用 main。它在整个文档中应唯一出现，且不能嵌套在 article、aside 或 nav 内部——否则语义冲突，屏幕阅读器可能跳过或误读。
section 是主题性分组容器，适合划分 main 内部结构（如“技术细节”“用户评价”“配置参数”），但不能替代 main 作为页面主干。常见错误：<section><h1>首页</h1>
<p>欢迎来到网站</p></section>——这其实是 main 的职责，用 section 会弱化主内容权重。
侧边栏为什么不是 div 而是 aside？
aside 不是“视觉上在右边”的标签，而是表达“与主内容相关但可独立存在”的语义。比如文章里的术语解释、作者简介、推荐阅读列表，都属于典型 aside 场景。
容易踩的坑：
- 把主导航塞进
aside—— 导航属于nav，和aside语义无关 - 把页脚版权信息放
aside—— 那是footer的职责 - 用
aside包广告横幅但内容完全无关 —— 语义断裂，SEO 和可访问性双输
多栏布局里 header 和 footer 怎么复用？
一个页面可以有多个 header 和 footer，但它们作用范围不同：
header 可以出现在整个页面顶层（ 直接子元素），也可嵌套在 article 或 section 内部，表示该区块自己的标题区域；同理，footer 可以是全站底部，也可以是某篇文章末尾的作者信息、发布时间等。
关键区别：
- 页面级
header/footer：无明确父容器，代表整页上下文 - 区块级
header/footer：必须包裹在article、section等语义容器内，否则会被解析为页面级，造成结构混乱 - 不要为了“看起来像页脚”而滥用
footer—— 比如把联系方式放在aside底部，就该用普通p或address，而非硬套footer
响应式多栏切换时，语义标签要不要跟着变？
不需要。HTML 语义标签描述的是内容本质，不是视觉形态。即使 CSS 把 aside 从右侧移到主内容下方（小屏堆叠），它依然是附属内容；即使 nav 在移动端收起为汉堡菜单，它仍是导航集合。
真正要检查的是结构是否仍成立：
- 折叠后，
nav是否仍包裹完整导航项（不能只剩一个按钮） -
main是否仍能被无障碍工具识别为唯一主内容区（避免 JS 动态插入导致丢失 role 或 tabindex） - 用
display: contents或visibility: hidden隐藏aside时，别误用display: none—— 后者会让辅助技术彻底忽略该元素
最常被忽略的一点：语义标签一旦写错，CSS 和 JS 很难补救。比如用 div class="main" 代替 main，再怎么加 ARIA 属性也比不上原生语义的可靠性。布局可以重写，结构错了就得返工。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
