、、、、、是定义页面功能区域的合法语义标签，用于向浏览器、搜索引擎和屏幕阅读器声明内容本质，而非仅控制样式；滥用div或误用这些标签会破坏结构语义、损害可访问性与seo。
<header></header>、<nav></nav>、<main></main>、<section></section>、<aside></aside>、<footer></footer> 这六个语义化标签，才是定义页面功能区域的合法手段——不是为了“看起来整齐”，而是为了让浏览器、搜索引擎和屏幕阅读器真正理解你写的是一段导航，还是一块侧边推荐。
为什么不能用 div 套 div 来划分功能区域
写 <div class="header"><div class="nav">... 看似能控制样式，但对结构毫无意义。浏览器不认 <code>class="header" 是页眉，SEO 工具不会因此提升标题权重，视障用户用读屏软件 tab 切换时，也得不到“这是导航区”的提示。
语义标签的作用是声明“这是什么”，不是“这长什么样”。以下情况必须警惕：
- 一个页面出现两个
<main></main>—— 浏览器会忽略第二个，辅助技术可能跳过主体内容 - 把
<header></header>当作顶部装饰盒，里面塞按钮、广告、登录框 —— 它只该放本页或本节的标题、logo、简短导语 - 用
<section></section>包裹没有标题（h1–h6）的内容 —— 语义断裂，它本质是“有主题的独立章节”
<main></main> 必须唯一，且不能嵌套在 <article></article> 或 <section></section> 外部
<main></main> 表示整页最核心、不可替代的内容，比如博客正文、商品详情、表单主操作区。它的约束非常刚性：
- 整个 HTML 文档中只能有一个
<main></main> - 不能出现在
<header></header>、<footer></footer>、<aside></aside>内部 - 可以包含
<article></article>或<section></section>，但反过来不行：不能把<main></main>放进<section></section>里 - 若页面是仪表盘，
<main></main>应包裹所有数据卡片容器，而不是每个卡片都套一个<main></main>
<nav></nav> 和 <aside></aside> 的使用边界在哪
<nav></nav> 不等于“所有带链接的地方”。它专指**主导航路径**：全站菜单、面包屑、翻页控件、跳转到锚点的目录。常见误用：
- 把页脚里的“隐私政策”“联系我们”链接放进
<nav></nav>—— 它们属于辅助信息，用普通p或ul即可 - 在文章末尾加“相关阅读”链接列表，却用了
<nav></nav>—— 更合适的是<aside></aside>，因为它是对当前内容的补充，非全局导航
<aside></aside> 也不是“右边那栏”。它表示与当前内容**有关联但可独立存在**的信息，例如：
- 博客正文旁的作者简介（含头像、社交链接）
- 新闻页右侧的背景资料卡片
-
<article></article>内部的引用说明或术语注释
如果右侧栏是全站统一的广告位或客服入口，它其实属于布局容器，应放在 级别的 <aside></aside>，而非嵌套在 <main></main> 里。
嵌套顺序和可访问性影响
语义标签的嵌套不是自由发挥。错误嵌套会让读屏软件跳过关键内容，或打乱阅读流。典型合规结构是：
<header>...</header><nav>...</nav><main><article><header><h1>标题</h1></header><p>正文</p>
<aside>术语解释</aside></article></main><aside>全站侧边栏</aside><footer>...</footer>
注意：<header></header> 可以出现多次（页面级 + 文章级），但每个 <header></header> 必须紧贴其所属区块的开头；<footer></footer> 同理，可属于 或某个 <article></article>，但不能悬空在 <main></main> 外又不属于任何父容器。
最容易被忽略的一点：语义结构一旦写错，CSS 再漂亮也救不回可访问性缺陷。检查时别只看渲染效果，用浏览器开发者工具的“Accessibility”面板或 Lighthouse 报告，直接看它是否识别出了正确的地标（landmark）区域。
