应使用header、nav、main、aside、footer搭主骨架，section和article组织内部内容；main必须唯一且为body直接子元素，article强调独立可分发，section侧重主题分组，aside需具关联性与可分离性。
直接结论：用 header、nav、main、aside、footer 搭骨架，再用 section 和 article 组织内部内容——不是为了好看，而是让浏览器、搜索引擎和屏幕阅读器能准确识别“哪是导航”“哪是正文”“哪是补充”。
为什么不能只用 div 套出五个区域？
写 <div class="header"> 或 <code><div id="main">，对机器来说就是一堆没名字的盒子。屏幕阅读器不会跳到“主内容”，搜索引擎可能把广告栏当成正文索引，CSS 里的 <code>main:focus-within 也根本不起作用。
真正起效的是原生语义：浏览器自动给 main 加 role="main"，nav 对应 role="navigation"，这些是解析器能直接读取的信号。
- 错误示例：
<div class="nav">@#@#@#@#@#@#@#@#@#@0</div>→ 读屏软件无法识别这是导航区 - 正确做法：
<nav>@#@#@#@#@#@#@#@#@#@0</nav>→ 自动获得导航上下文 - 额外成本几乎为零：改标签名 + 删 class，不改样式、不重写 JS
main 必须唯一且不能嵌套，但很多人把它塞错了位置
main 是页面中“删掉就失去访问价值”的那部分，比如一篇教程正文、商品详情描述、表单主体。它必须是 body 的直接子元素，且全页只能有一个。
- 常见错误：把顶部搜索框、主导航、页脚备案号全包进
main→ 这些是重复性全局区块，应放在main外部 - 更隐蔽的错：在
article或section内部再写一个main→ 语法合法但语义崩溃，辅助工具会忽略嵌套的main - 正确结构：
body > header+nav+main+aside+footer（顺序可调，但层级必须平级）
用 section 还是 article？看它能不能单独被 RSS 订阅
判断标准非常实际：把这块内容复制出来，不带页面其他部分，它还能不能被理解、被转发、被聚合？能 → article；不能 → section。
-
article适合：博客条目、新闻卡片、用户评论、产品介绍卡片。每篇都该有自己独立的header（含标题+时间）和footer（含作者/标签） -
section适合：“安装步骤”“参数说明”“售后服务”这类模块——拆开任何一个，都依赖上下文才能成立 - 硬伤提醒：没标题的
section很可能语义断裂；而article里嵌套另一个article属于滥用（比如在一篇博客里再套一篇“引用文章”，该用blockquote或figure）
aside 不是“右边那个栏”，而是“可移除但不影响主线”的内容
aside 的关键是关联性 + 可分离性。它出现在 main 旁，或嵌套在 article 里，都行；但它不能是整页无关广告位，也不能是主导航的备份。
- 合理用法：
article旁的“作者简介”、技术文档里的“术语解释框”、新闻页右侧的“同类报道推荐” - 不合理用法：页脚一堆友情链接（用普通链接即可）、全站横幅广告（若与当前内容无强关联，应加
<div aria-label="广告"> 明确用途） <li>注意兼容：旧版 IE 不支持 <code>aside，但加了也不会报错；真要保底，只需确保 CSS 里没写aside { display: block; }这类冗余声明（现代浏览器默认就是 block）
最容易被忽略的其实是 header 和 footer 的复用逻辑——它们可以出现多次，但每次都要服务于其父级上下文。一个 article 里的 header 是文章标题，不是网站 logo；main 外的 footer 是版权信息，article 末尾的 footer 是发布时间。语义不是贴标签，是回答“这个区块，在这个上下文中，它到底在干什么”。
