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