语义化HTML标签是页面结构识别的硬性依据，影响可访问性和SEO；<main>唯一且不可嵌套，<article>需独立可复用，<section>仅表逻辑分块，<aside>强调内容相关性而非位置。
<header>、<nav>、<main>、<section>、<article>、<aside>、<footer> 这些标签不是“可选装饰”，而是浏览器和辅助技术识别页面结构的硬性依据。不用它们，div 套来套去的页面在屏幕阅读器里就是一长串“盒子”，SEO 也容易把侧边广告当成主内容抓取。
什么时候该用 <main> 而不是 <section>
<main> 表示整个页面唯一的核心内容区域；<section> 是其中的逻辑分块。一个页面只能有一个 <main>，且不能嵌套在 <article>、<aside>、<footer> 等中。
- 正确：
<main><section><h2>产品列表</h2></section></main> - 错误：
<section><main>...</main></section>（嵌套违规） - 错误：
<main>...</main><main>...</main>（重复使用） - 注意：
<main>不代表“视觉居中”，它不带默认样式，仍需 CSS 控制布局
<article> 和 <section> 的边界在哪
<article> 必须是能独立存在、可被转载或 RSS 抓取的内容单元（比如一篇博客、一条新闻、一个用户评论）；<section> 只是主题一致的区块，不具备自包含性。
- 适合用
<article>：<article><h2>React 19 新特性详解</h2><p>……</p></article> - 适合用
<section>：<section><h2>关于我们</h2><p>公司简介</p></section>（无法脱离当前页面独立传播） - 常见误用：把轮播图容器、页脚版权栏写成
<article>—— 它们既不独立，也不可复用 - 嵌套关系允许：
<article>内部可用<section>划分子章节
<aside> 不等于“右边那栏”
<aside> 的语义是“与主内容相关但非核心的补充信息”，位置无关。它可以出现在主内容前、中、后，甚至在移动端折叠进汉堡菜单里。
立即学习“前端免费学习笔记（深入）”；
- 合理场景：
<aside><h3>作者简介</h3><p>……</p></aside>（附在某篇<article>旁） - 合理场景：
<aside><h3>相关推荐</h3><ul>...</ul></aside>（作为整页的辅助模块） - 不合理场景：把全站导航栏塞进
<aside>—— 那是<nav>的职责 - 兼容提示：IE8 及更早版本不支持
<aside>，若需支持，得靠 HTML5 Shiv 或降级为<div role="complementary">
最容易被忽略的一点：语义标签本身不解决样式问题，但会直接影响可访问性树（Accessibility Tree）的生成。比如没用 <nav>，屏幕阅读器就无法快捷跳转到导航区；没用 <time datetime="2026-08-25">，日期对机器就是纯文本，无法被日历工具识别。语义不是“锦上添花”，而是让页面真正可被机器理解的第一道门槛。
