<main>必须且只能出现一次，不可嵌套在<section>或<div>内；应位于<body>直接子元素中，紧跟<header>后、<footer>前，包裹所有核心内容，否则会破坏主内容区语义，导致屏幕阅读器跳转失效。
<main></main> 必须且只能出现一次，<article></article> 和 <section></section> 不能嵌套在 <header></header> 或 <footer></footer> 内——这是文档流断裂最常见的起因。
用语义标签天然维持块级流顺序
浏览器默认按文档流自上而下渲染，而多数语义标签（如 <header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer>）本身就是块级元素，会自动换行并独占一行。这意味着只要按逻辑顺序书写，结构就自然对齐视觉与语义流。
-
<header></header>应始终位于开始后、<nav></nav>前（若存在），它不“属于”导航，而是导航的上级容器 -
<nav></nav>紧跟<header></header>后是合理默认，但若页面有多个导航区（如顶部主导航 + 文章内面包屑），应各自用独立<nav></nav>，并用aria-label区分 -
<main></main>必须包裹所有核心内容，且不能被<aside></aside>或<section></section>包裹——否则会破坏“唯一主内容区”的语义断言，影响屏幕阅读器跳转逻辑
<section></section> 和 <article></article> 的嵌套边界在哪
<section></section> 表示主题相关的区块，<article></article> 表示可独立分发的内容；二者都要求有标题（<h1></h1>–<h6></h6>），否则语义残缺。它们不是互斥关系，但嵌套必须符合内容层级。
- 一个博客列表页：外层用
<main></main>，每篇博文用<article></article>，每篇内部若含多个子主题（如“背景”“方法”“结论”），才用<section></section>划分 - 禁止把整页内容塞进一个
<section></section>再套<article></article>——这混淆了“章节”与“独立内容”的语义粒度 -
<article></article>可以嵌套<section></section>，但<section></section>不能包裹<main></main>或<header></header>，否则破坏文档大纲生成
为什么 <aside></aside> 放错位置会让流“消失”
<aside></aside> 是副区域，语义上必须与邻近的 <article></article> 或 <section></section> 相关。如果把它放在 <main></main> 外、<footer></footer> 前，或孤立于 <header></header> 下方，辅助技术将无法建立逻辑关联，可能直接跳过。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：紧贴所服务的内容块之后，例如
<article></article>→<aside></aside>→<footer></footer>，或<section></section>→<aside></aside> - CSS 的
float或position: absolute会让<aside></aside>脱离文档流，此时必须补aria-labelledby或aria-flowto显式声明其语义归属 - 不要用
<aside></aside>放广告或无关推荐——语义错配会干扰流式理解，搜索引擎也可能降权
最易被忽略的一点：<time datetime="2026-06-15"></time> 这类内联语义元素虽不打断行流，但若放在 <header></header> 里却没和 <h1></h1> 关联，机器就无法判断它是发布时间还是更新时间——语义流不只是块级顺序，也包括属性与上下文的显式绑定。
