HTML语义标签是浏览器、搜索引擎和辅助技术识别页面结构的硬性信号，用错或不用会损害SEO、无障碍访问和CSS语义锚点稳定性。
<header>、<nav>、<main>、<section>、<article>、<aside>、<footer> 这些标签不是“可选装饰”，而是浏览器、搜索引擎和辅助技术识别页面逻辑的硬性信号——用错或不用，会直接导致 SEO 折损、屏幕阅读器跳转错乱、甚至影响 CSS 选择器的语义锚点稳定性。
什么时候该用 <article> 而不是 <section>
<article> 表示**可独立分发、复用的内容单元**，比如一篇博客、一条新闻、一个用户评论；<section> 只是文档中一个有主题的“节”，不能脱离上下文独立存在。
- ✅ 正确：
<article><h2>React 19 新特性详解</h2><p>…</p></article>（可 RSS 订阅、单独分享） - ❌ 错误：
<section><h2>关于我们</h2><p>公司成立于2015年…</p></section>放在<main>内没问题，但若把它当独立内容嵌入其他页面，语义就崩了 - ⚠️ 注意：
<article>内部必须有<h1>–<h6>标题（否则辅助技术无法建立层级），而<section>没这个强制要求
<main> 必须唯一，且不能嵌套在 <article> 或 <section> 里
<main> 是整个页面的**主体内容容器**，代表用户最关心的那一块。W3C 明确规定：一个文档中只能有一个 <main>，且它不能是 <article>、<aside>、<footer>、<header>、<nav>、<section> 的子元素。
- ✅ 正确：直接放在
<body>下，兄弟于<header>和<footer> - ❌ 常见错误：
<article><main>…</main></article>—— 这会让屏幕阅读器误判“这篇文章就是整页”，丢失全局上下文 - ⚠️ 兼容提示：IE 不支持
<main>，需加 ARIA role：<main role="main">（现代项目基本可忽略，但遗留系统要留意）
<aside> 不等于“侧边栏”，而是“与主内容相关但可分离的补充信息”
很多人把 <aside> 当作 CSS 布局中的“右边那块”，这是典型误解。它的语义核心是**关联性 + 可剥离性**：比如博客正文旁的作者简介、术语解释框、相关文章推荐列表——删掉它，主内容依然完整。
立即学习“前端免费学习笔记（深入）”；
- ✅ 合理：
<aside><h3>延伸阅读</h3><ul><li><a href="#">…</a></li></ul></aside>（出现在<article>内部） - ❌ 错误：
<aside><nav>…</nav></aside>—— 导航属于全局结构，应该用<nav>，且通常在<header>或<footer>中 - ⚠️ 性能注意：某些 SSR 框架（如 Next.js）对
<aside>的 hydration 处理较弱，若内含交互组件，建议显式加suppressHydrationWarning或包裹<div>
最容易被忽略的一点：语义标签本身不带默认样式，但它们会改变浏览器内置的 outline 跳转顺序、焦点管理逻辑和 DevTools 的“Accessibility”面板结构树——这意味着，哪怕视觉上没差别，用 <nav> 替代 <div class="nav"> 也会让键盘用户多出一次 Tab 就能跳过整个导航区。这不是“锦上添花”，是基础可用性门槛。
