必须优先掌握<header>、<nav>、<main>、<article>、<aside>、<footer>这6个语义化标签，它们覆盖90%页面结构需求，IE11+全支持，语义清晰且可访问性友好；<main>须为<body>直接子元素，<section>需有标题，<article>内容须独立可重用，<aside>强调相关性与可分离性。
必须优先掌握这6个：<header>、<nav>、<main>、<article>、<aside>、<footer>。它们覆盖90%页面结构需求，IE11+ 全支持，且语义清晰、可访问性友好——用错比不用代价更大。
为什么 <main> 不能嵌套在 <header> 或 <section> 里
<main> 表示整个页面唯一的主要内容区域，浏览器和屏幕阅读器会据此跳过装饰性区块直达核心。一旦嵌套在 <header> 或 <section> 中，语义就坍缩成“某个区块里的主要内容”，与规范冲突。
- 实际错误现象：
<main>被读屏软件忽略，或 SEO 工具报“multiple main landmarks”警告 - 正确写法：
<main>必须是<body>的直接子元素（或仅被<div>等无语义容器包裹） - 兼容性注意：IE 不识别
<main>的语义，但不会报错；可用role="main"降级兜底
<section> 和 <div> 的关键区别在有没有标题
<section> 不是“带样式的 div”，它必须有主题，且该主题需由 <h1>～<h6> 显式表达。没标题的轮播图、卡片列表、分隔线区块，都不该用 <section>。
- 常见错误：
<section><div class="carousel">...</div></section>—— 这里<section>没标题，纯属冗余 - 替代方案：用
<div role="region" aria-label="首页推荐商品">，既保持无障碍，又不滥用语义 - 性能影响：过度使用
<section>会让 DOM 层级变深，对 SSR 渲染无实质影响，但会增加可访问性树复杂度
<article> 的独立性判断标准很具体
<article> 内容必须能脱离当前页面单独存在、被重用或 syndicated（比如 RSS 订阅）。博客正文、新闻稿、用户评论，都符合；但导航菜单、页脚版权栏、侧边广告位，不符合。
立即学习“前端免费学习笔记（深入）”；
- 典型误用：把每个产品卡片都包一层
<article>—— 若卡片本身无完整标题/作者/发布时间，就不算独立内容 - 正确搭配：
<article>内应包含<header>（含<h2>）、<footer>（含时间/分类），否则语义不完整 - SEO 影响：搜索引擎会把
<article>内容权重提高，但若滥用（如包住按钮或图标），反而稀释主内容信号
<aside> 不等于“侧边栏”，而是“可分离的相关内容”
<aside> 的核心是相关性 + 可分离性。它可以出现在页面任意位置（不限于右侧），甚至嵌套在 <article> 内作为术语解释、引用来源或补充图表。
- 错误认知：“侧边栏必须用
<aside>” → 实际上，纯导航或广告侧栏更该用<nav>或无语义<div> - 真实场景：
<article><p>…</p><aside><p>【注】此处数据引自 2025 年行业白皮书</p></aside></article> - 可访问性提示：屏幕阅读器会把
<aside>当作次要流处理，跳过不影响主线理解 —— 所以别在里面放关键操作按钮
真正难的不是记住标签名，而是每次写 HTML 时下意识问一句：“这个区块如果抽出来发到 Twitter，它自己能讲清楚发生了什么吗？”——<article> 和 <aside> 尤其如此。很多语义问题，根源不在标签不会用，而在内容边界没想清。
