HTML5语义化布局标签header、nav、main、article、section、aside、footer具有明确结构含义；main必须唯一且不可嵌套；article用于可独立分发内容，section用于带标题的主题分组；语义选择取决于逻辑关系而非视觉位置。
header、nav、main、article、section、aside、footer 是真正适合做布局的 HTML5 语义化标签。它们不是装饰性的，而是浏览器、屏幕阅读器和搜索引擎能识别的结构信号。
为什么不能用 div 做布局主干？
用 <div class="header"> 或 <div id="main"> 看似可行，但问题在于：
- 辅助技术（如屏幕阅读器）无法区分这个
div是导航还是广告，只能靠 class 名“猜” - 搜索引擎不会给
div赋予结构权重，main里的内容才被认定为页面核心 - 当 CSS 失效或 JS 未加载时，
nav仍能被朗读为“导航区域”，而div就是纯空白
main 必须唯一且不能嵌套在其他布局标签里
这是最容易出错的地方：main 表示当前页面独一无二的核心内容容器，它不能出现在 header、nav、aside、footer 或另一个 article 内部。
- ✅ 正确：
<body><header>...</header><main>...</main><footer>...</footer></body> - ❌ 错误：
<article><main>...</main></article>（main不该嵌套在article中） - ❌ 错误：
<header><main>...</main></header>（main不属于页眉逻辑）
article 和 section 的关键区别在哪？
两者都划分内容区块，但语义完全不同：
立即学习“前端免费学习笔记（深入）”；
-
article强调“可独立分发”：一篇博客、一条新闻、一个用户评论，能被 RSS 抓取、单独打印、或脱离原页面存在 -
section强调“有主题的逻辑分组”：比如“产品特性”“客户评价”“技术参数”，必须带标题（h2–h6），否则语义不成立 - 别把长文章硬拆成多个
section就为了“看起来结构清晰”——如果每段都能单独发布，就该用article；如果只是同一主题下的子模块，才用section
真正难的是判断某个区块该用 section 还是 article，或者该不该用 aside。这不取决于视觉位置，而取决于它和邻近内容的逻辑关系——写之前先问一句：“这段内容离开这里，还能被理解吗？”
