html语义化标签必须严格按内容角色、嵌套规则和可访问性约束使用：用于可独立分发的内容（如博客、评论），仅表逻辑区块；/属节内而非全页容器；标题层级须与节元素严格对齐；旧浏览器需用aria补全语义。
HTML语义化标签不是“能用就用”，而是必须按内容角色、嵌套规则和可访问性约束来强制规范——否则比不用更糟。
什么时候该用 <article></article> 而不是 <section></section>
<article></article> 表示**可独立分发或复用的内容单元**，比如一篇博客、一条新闻、一个用户评论；<section></section> 只是文档中一个有主题的逻辑区块，不能脱离上下文存在。
- ✅ 正确：
<article></article>包裹整篇技术博文，内部含<header></header>（标题+作者+时间）、<main></main>（正文）、<footer></footer>（标签+评论入口） - ❌ 错误：把“兼容性说明”“性能对比”两个小节各自套一层
<article></article>——它们不是独立内容，只是同一篇文章的子部分 - ⚠️ 注意：
<article></article>嵌套<article></article>是允许的（如评论列表里的每条评论），但必须每个子<article></article>都满足“可独立存在”条件；否则应改用<section></section>
<header></header> 和 <footer></footer> 不是“页面顶部/底部”的视觉容器
这两个标签表达的是**所属节（sectioning content）的头部或尾部**，不是全页的页眉页脚。滥用会导致大纲错乱、屏幕阅读器跳读异常。
- ✅ 正确：
<article></article>内部的<header></header>放标题和发布日期；<section></section>内部的<footer></footer>放该章节的参考资料链接 - ❌ 错误：用
<header></header>包整个页面顶部（logo + 导航 + 搜索框）——这其实是多个语义区域的混合，应拆成<header></header>（仅 logo）、<nav></nav>（导航）、<form></form>（搜索） - ⚠️ 注意：
<main></main>不能作为<header></header>或<footer></footer>的子元素；浏览器会忽略这种嵌套，大纲算法直接丢弃
嵌套层级与大纲算法失效的常见坑
HTML5 的文档大纲由 <article></article>、<section></section>、<nav></nav>、<aside></aside>、<main></main> 这些节根元素驱动，标题层级（<h1></h1>–<h6></h6>）必须与之对齐。错配就会让结构“隐形”。
- ✅ 正确：一个
<section></section>内部以<h2></h2>开头，其子<section></section>用<h3></h3>，严格递进 - ❌ 错误：
<section></section>里直接放<h4></h4>，前面没<h2></h2>或<h3></h3>；或者在<article></article>外层又套了个<section></section>却没配标题 - ⚠️ 注意：Safari 对
<main></main>和<nav></nav>的隐式 role 推断仍有偏差，若依赖 ARIA 自动补全，需显式加role="main"或role="navigation"保底
IE9 以下或老旧辅助工具的兼容性真实代价
加 html5shiv 只解决样式渲染，不修复语义解析。真正影响可访问性和 SEO 的是大纲结构，而这点旧环境根本无法还原。
- ✅ 可行方案：对必须兼容 IE8 的项目，放弃
<article></article>等标签，改用<div role="article"> + 显式 <code>aria-labelledby关联标题 - ❌ 无效操作：只引入
html5shiv就认为语义化“已支持”——JAWS 15 会把嵌套三层的<section></section>当作单层处理，中间层级完全跳过 - ⚠️ 注意：即使现代浏览器下，若页面混用
<div class="section"> 和 <code><section></section>，大纲生成器（如 axe 浏览器插件）会报出“结构不一致”警告，且不可忽略语义化最难的不是记住标签名，而是每次写
<section></section>前都得问一句：它有没有独立主题？能不能被单独 RSS 订阅？删掉它，主干内容是否仍成立？这些判断没法靠 lint 工具自动完成。
