HTML5语义标签自2014年W3C推荐标准起已稳定，section须有标题且表独立主题，main唯一不可嵌套，header/footer作用域限于最近节元素。
HTML内容分块没有“最新标准版本”这种说法——header、main、section、article、aside、footer 这些语义化标签自 HTML5 成为 W3C 推荐标准（2014 年）起就已稳定，至今未被替换或废弃。所谓“最新实践”，其实是对既有规范更严格、更一致的落地执行，尤其在可访问性与构建工具链成熟后，容错空间变小了。
什么时候该用 section 而不是 div
核心判断依据只有一条：这块内容是否自带明确主题，且能独立成节？ 如果是，必须用 section；否则用 div。
-
section必须带标题（h2–h6），没标题就是语义失效，等同于滥用 - 常见误用：
<section class="card-grid">—— “卡片网格”是布局模式，不是主题，应改用<div class="card-grid"> -
section不等于“视觉上看起来像一块”，而是“逻辑上讲得清它是什么”：例如“用户评价”“技术参数”“相关文章”都算；但“轮播容器”“加载占位符”不算 - 搜索引擎和屏幕阅读器会把
section当作一个导航单元，错误使用会导致结构混乱、跳转错乱
main 元素的硬性限制与常见越界
main 是页面中唯一不可嵌套、不可重复、不可省略的语义容器——它不是“可选增强”，而是结构刚需。
- 一个页面只能有一个
main，且不能出现在header、footer、aside或另一个section内部 - 错误示例：
<section><main>...</main></section>—— 违反嵌套规则，屏幕阅读器可能直接跳过 - 如果用了 SSR 或组件框架（如 Next.js、Nuxt），注意服务端渲染时不要意外生成多个
main（比如 layout + page 各 render 一个） -
main内容必须是“可独立分发”的主干信息：一篇博文、一个产品详情页、搜索结果列表。导航栏、面包屑、页脚链接都不该塞进去
嵌套层级中 header 和 footer 的作用域问题
header 和 footer 可以多次出现，但每次出现都只服务于最近的祖先节元素（body、section 或 article），不是全局复用容器。
立即学习“前端免费学习笔记（深入）”；
- 全局页眉应作为
body直接子元素：<body><header>...</header><main>...</main></body> - 某篇博客文章内部的作者信息、发布时间，应放在
<article><header>...</header><p>正文</p><footer>...</footer></article> - 禁止在
main外再写一个<header><nav>...</nav></header>—— 它不属于任何节元素，语义悬空，辅助技术无法定位 - 实际项目中容易忽略：用 JS 动态插入的弹窗、侧边栏，若含
header，需确保其父容器是合法节元素，否则会被读屏器当作孤立节点跳过
真正难的不是选哪个标签，而是坚持让每个标签都承载真实语义——一旦开始用 section 包按钮组、用 article 套广告位，整个结构就退化回 div 时代，只是换了个名字而已。
