仅用于有标题的独立章节，不可替代或；表附属内容，专指导航链接；每页唯一且不可嵌套；html5大纲算法已失效，标题层级取决于–显式顺序。
section 元素不是语义分组万能胶
很多人一看到“章节”就下意识用 <section></section>，结果文档结构反而更混乱。它只适用于有明确标题、可独立成节的内容块，比如文章里的小节、产品页的功能模块。没有标题的容器（比如纯样式包裹层）用 <div> 更合适。
<p>常见错误现象：<code><section></section> 嵌套在 <header></header> 或 <footer></footer> 里，或者给轮播图外层硬套 <section></section> —— 这些地方没有章节意义，只是布局需要。
- 必须配合标题元素使用：至少包含一个
<h1></h1>–<h6></h6> - 不能替代
<article></article>：如果内容是自包含、可复用（如博客正文、新闻卡片），优先选<article></article> - 屏幕阅读器会把
<section></section>当作导航单元，乱用会干扰辅助技术用户
aside 和 nav 的边界在哪
<aside></aside> 不是“侧边栏”的视觉定义，而是语义上的“附属内容”。它和当前上下文相关，但不是主内容核心部分，比如博客里的作者简介、术语解释框、相关链接推荐。
<nav></nav> 则专指页面级导航区块，比如顶部菜单、面包屑、页脚链接组。它不关心位置，只关心用途 —— 只要是一组用于跳转的链接，且服务于整页或大范围导航，就该用 <nav></nav>。
立即学习“前端免费学习笔记（深入）”；
-
<aside></aside>里放导航链接？可以，但得是上下文相关的（如“本节参考文献”），否则应归入<nav></nav> - 一个页面最多 1–2 个
<nav></nav>；<aside></aside>数量不限，但每个都得有明确附属关系 - 搜索引擎和阅读器依赖这些标签判断内容权重，混用会导致主次不分
main 元素只能出现一次，且不能嵌套
<main></main> 表示文档中与当前页面唯一对应的核心内容。它不是“主要内容容器”，而是“不可重复的主体”。比如单页应用里，路由切换后 <main></main> 内容会变，但标签本身不会多出第二个。
常见错误现象：组件库模板里每个卡片都包一层 <main></main>；或者在 <article></article> 里再套 <main></main> —— 这直接违反 HTML 规范，解析器会静默忽略多余标签，导致语义丢失。
- 每个页面有且仅有一个
<main></main> - 不能是
<article></article>、<aside></aside>、<nav></nav>、<header></header>、<footer></footer>的子元素 - 如果用了
<main></main>，就别再用 ARIArole="main"，二者语义重复
HTML5 章节大纲算法已基本失效
过去以为用好 <section></section> + <h1></h1>–<h6></h6> 就能自动生成逻辑清晰的大纲，但现实是：主流浏览器和读屏软件早已放弃按 HTML5 大纲算法解析标题层级。现在起作用的，还是传统 <h1></h1>→<h2></h2>→<h3></h3> 的显式嵌套关系。
这意味着：<section></section> 的存在本身不影响标题层级，真正决定结构的是 heading 元素的顺序和级别。别指望靠换标签来“修复”大纲。
- 检查大纲的最可靠方式：用 Chrome 的 Lighthouse 或 axe 插件看“Heading levels”项
- 避免在同一个
<section></section>里跳级写标题（如<h2></h2>后直接<h4></h4>） - 服务端渲染或静态站点生成时，动态插入的
<h2></h2>要确保全局连续，否则大纲断裂
语义标签的价值不在“看起来像章节”，而在让机器准确理解哪段是主干、哪段是补充、哪段是导航。写错一个 <section></section> 可能影响不大，但连错三处，辅助技术和 SEO 就开始“看不懂”了。
