html语义化核心是标签承担正确结构职责，而非仅添加新标签；用于可独立分发内容，用于主内容的子模块，唯一且不嵌套，须逻辑相关可分离，标题层级断裂最易致语义失效。
HTML语义化不是“加几个新标签就完事”，而是让每个标签承担它该承担的结构职责——用错比不用更伤可访问性和SEO。
什么时候该用 <article></article> 而不是 <section></section>
关键看内容是否「可独立分发或复用」：一篇博客正文、一条用户评论、一个新闻条目，都该用 <article></article>；而“安装步骤”“兼容性说明”“性能对比”这类服务于主内容的子模块，用 <section></section> 更准确。
-
<article></article>必须有自己完整的上下文（比如自带<h2></h2>标题 + 作者 + 时间），移出页面后仍能被理解 -
<section></section>内部不能没有标题（<h2></h2>–<h6></h6>），否则浏览器大纲会断裂，屏幕阅读器可能跳过整块 - 别把整个产品页包进一个
<article></article>——它不是“文章风页面”的样式开关，是语义容器
<main></main> 只能出现一次，且不能嵌套在 <article></article> 或 <section></section> 里
<main></main> 表示整页唯一的核心内容流，浏览器和辅助工具靠它快速定位主体。它和 <article></article> 是平行关系，不是父子关系。
- 错误写法：
<article><main>...</main></article>—— 这会让大纲算法误判层级，JAWS 等旧版读屏器可能直接忽略<main></main> - 正确结构：页面级
<main></main>包含多个<article></article>或<section></section>，各自带自己的标题 - 如果页面是仪表盘或后台管理页，没有明显“主内容”，宁可不用
<main></main>，也别硬套
<aside></aside> 不是“侧边栏视觉容器”，而是逻辑上「与当前内容相关但可分离」的补充信息
广告、术语解释、作者简介、相关链接列表——这些才符合 <aside></aside> 的语义。纯导航、logo 区、搜索框都不该放这里。
- 错误场景：把全站顶部导航塞进
<aside></aside>，或把右侧固定客服入口当<aside></aside> - 正确用法：
<article><h2>React Hooks 原理</h2> <p>...</p> <aside><h3>延伸阅读</h3> <ul>...</ul></aside></article> - 注意：如果
<aside></aside>出现在<article></article>外（比如全站右侧边栏），它描述的是整页上下文的补充，不是某篇文章的
IE8 及更早版本不支持语义标签，但加 html5shiv ≠ 真正语义化
html5shiv 只解决两件事：让 IE8 能识别新标签并应用 CSS；让 document.createElement 生效。它完全不修复大纲解析或 ARIA role 推断。
- 真实陷阱：加了
html5shiv后，<nav></nav>在 IE8 里仍不会被读作 “navigation”，屏幕阅读器照样当普通 div 读 - 若项目必须支持 IE9 以下，优先用
role="navigation"、role="main"等 ARIA 属性，而不是强依赖标签名 - Safari 对
<main></main>的隐式role="main"支持曾有偏差（2025 年前旧版），建议显式加role="main"保底
最容易被忽略的一点：语义化失效往往不在标签选择，而在标题层级断裂——比如用了 <section></section> 却没配 <h2></h2>，或 <article></article> 里只有 <p></p> 没标题。浏览器大纲生成器只认 heading 元素，不认标签名本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
