main必须全页唯一且不可嵌套，是用户核心内容的语义中枢；aside须依附上下文，与main并列或置于article/section内；区域映射重在职能归类，非视觉布局。
HTML页面多个区域映射，本质不是“怎么放”，而是“怎么分层归类”——header、nav、main、aside、footer 这五个语义化标签必须按内容职能严格对应，错位一个，后续所有 CSS 布局、可访问性、SEO 都会出隐性问题。
为什么不能套在里？
很多开发者把 main 当成“右边那个内容区”的视觉容器，于是写成 <div class="container"><main>...</main></div>。这直接破坏了语义层级：main 表示整页唯一的核心内容流，它不该被视觉包装层包裹；而 class="container" 是纯样式辅助，应加在 main 内部子元素上（比如 <main><section class="container">...</section></main>）。
-
main 必须且只能出现一次，且不能是 article、section 或其他语义容器的子元素
- 屏幕阅读器依赖
main 快速跳转到主体，嵌套或重复会导致跳转失效
- 某些 SEO 工具（如 Google Search Console）会降权识别不到有效
main 的页面
aside到底该放哪？常见位置陷阱
aside 不等于“右侧那个窄栏”。它的语义是“与当前内容相关但非核心的辅助信息”，所以位置取决于上下文：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
下载
- 在整站布局中，
aside 作为全局侧边栏，应和 main 并列于同一父容器下（例如 <div class="layout">
<main>...</main><aside>...</aside>
</div>）
- 在文章页内，若某段落旁需插入“术语解释”或“参考资料”，则
aside 应放在该 section 或 article 内部，而非页面级布局中
- 误把页脚链接、版权信息塞进
aside —— 这属于 footer 职责，语义混淆后会影响结构化数据提取
Flex vs Grid：选哪个来连接区域映射？
区域映射完成之后，才轮到 CSS 控制它们如何排列。别一上来就给 body 加 display: flex —— 那会让 header 和 footer 被拉伸变形。
立即学习“前端免费学习笔记（深入）”；
- 外层垂直流（header → main → footer）用
flex-direction: column，容器设 min-height: 100vh，但 header/footer 必须设固定高或 flex: 0 0 auto
-
main 内部左右分栏：优先用 Flex —— display: flex + aside { width: 240px } + section { flex: 1 }，简单稳定，IE11 也兼容
- 只有当需要跨区域（比如 Banner 横跨 header 和 main）、或行列都需要强约束（如广告位固定在第三行第二列）时，才用 Grid，并配
grid-template-areas 显式声明映射关系
响应式切换时，区域顺序容易被忽略的关键点
移动端常需把 aside 从右侧移到 main 下方，很多人只改 CSS 顺序，却忘了 DOM 结构本身没变 —— 这会导致键盘 Tab 流、屏幕阅读器遍历顺序仍按桌面版走，形成可访问性断层。
- 真正安全的做法：保持 HTML 结构不变，仅用 CSS
order 属性调整视觉顺序（Flex）或 grid-row（Grid），不改动 DOM 顺序
- 避免用
display: none 隐藏 aside 后又用 JS 动态插入新节点——隐藏的语义元素仍参与 ARIA 树，可能触发意外焦点捕获
- 如果必须重排 DOM（如用 JS 拆分/重组区域），务必同步更新
aria-labelledby 或 aria-owns 关系，否则辅助技术无法理解新映射
里？
很多开发者把 main 当成“右边那个内容区”的视觉容器，于是写成 <div class="container"><main>...</main></div>。这直接破坏了语义层级：main 表示整页唯一的核心内容流，它不该被视觉包装层包裹；而 class="container" 是纯样式辅助，应加在 main 内部子元素上（比如 <main><section class="container">...</section></main>）。
-
main必须且只能出现一次，且不能是article、section或其他语义容器的子元素 - 屏幕阅读器依赖
main快速跳转到主体，嵌套或重复会导致跳转失效 - 某些 SEO 工具（如 Google Search Console）会降权识别不到有效
main的页面
aside到底该放哪？常见位置陷阱
aside 不等于“右侧那个窄栏”。它的语义是“与当前内容相关但非核心的辅助信息”，所以位置取决于上下文：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 在整站布局中，
aside作为全局侧边栏，应和main并列于同一父容器下（例如<div class="layout"> <main>...</main><aside>...</aside> </div>） - 在文章页内，若某段落旁需插入“术语解释”或“参考资料”，则
aside应放在该section或article内部，而非页面级布局中 - 误把页脚链接、版权信息塞进
aside—— 这属于footer职责，语义混淆后会影响结构化数据提取
Flex vs Grid：选哪个来连接区域映射？
区域映射完成之后，才轮到 CSS 控制它们如何排列。别一上来就给 body 加 display: flex —— 那会让 header 和 footer 被拉伸变形。
立即学习“前端免费学习笔记（深入）”；
- 外层垂直流（header → main → footer）用
flex-direction: column，容器设min-height: 100vh，但header/footer必须设固定高或flex: 0 0 auto -
main内部左右分栏：优先用 Flex ——display: flex+aside { width: 240px }+section { flex: 1 }，简单稳定，IE11 也兼容 - 只有当需要跨区域（比如 Banner 横跨 header 和 main）、或行列都需要强约束（如广告位固定在第三行第二列）时，才用 Grid，并配
grid-template-areas显式声明映射关系
响应式切换时，区域顺序容易被忽略的关键点
移动端常需把 aside 从右侧移到 main 下方，很多人只改 CSS 顺序，却忘了 DOM 结构本身没变 —— 这会导致键盘 Tab 流、屏幕阅读器遍历顺序仍按桌面版走，形成可访问性断层。
- 真正安全的做法：保持 HTML 结构不变，仅用 CSS
order属性调整视觉顺序（Flex）或grid-row（Grid），不改动 DOM 顺序 - 避免用
display: none隐藏aside后又用 JS 动态插入新节点——隐藏的语义元素仍参与 ARIA 树，可能触发意外焦点捕获 - 如果必须重排 DOM（如用 JS 拆分/重组区域），务必同步更新
aria-labelledby或aria-owns关系，否则辅助技术无法理解新映射
