语义化标签必须准确表达结构：main须唯一且不嵌套，section需有标题，header可嵌套于article等元素内，article仅用于可独立分发的内容。
语义化标签不是“写得像HTML5”就行，而是让浏览器、爬虫、屏幕阅读器能准确识别结构——用错一个标签，可能直接让无障碍导航失效或SEO权重归零。
为什么不能嵌套在里
浏览器和读屏器把 main 当作“唯一主内容入口”，一旦它被包进 header、footer 或 section，就会触发两个实际问题：
- 读屏器跳转时会跳过整个外壳，直接进到
main内部，但用户可能根本不知道页面还有顶部导航 - 搜索引擎判定该页无明确主内容区域，降权处理（尤其对内容型站点）
- 多个
main会导致 DOM 结构冲突，部分旧版 Safari 会静默丢弃第二个及以后的main
正确写法只有一种：<header>...</header><nav>...</nav><main id="content">...</main><footer>...</footer>
必须带标题，否则不如用
section 的语义是“文档中一个独立的章节”，没有标题就等于告诉机器：“这段内容无法被大纲索引”。后果很实在：
- 屏幕阅读器无法生成有效导航列表（比如按 H2 跳转时漏掉这个区块）
- Chrome DevTools 的 “Accessibility” 面板会标出
section without heading 警告
- SEO 工具（如 Lighthouse）直接扣分，影响内容结构评分
补救方式不是硬加 <h2></h2>，而是用 aria-labelledby 关联已有标题，或改用 div——如果这块只是视觉分组，没有逻辑层级。
不止能用在页面顶部
很多人把 header 当成“网站顶栏专用标签”，结果在文章内部、卡片组件里全用 div class="header"，这等于主动放弃结构表达能力：
-
header 可以出现在 article、section 甚至 aside 内部，表示该区块自己的头部信息
- 里面放
h2 + p + time 是完全合法且推荐的，比如博客文章头、评论区标题栏
- 滥用
div 替代 header 会导致辅助技术无法区分“全局头部”和“局部头部”，导航混乱
典型误用：<div class="post-header">
<h2>标题</h2>
<p>作者：张三</p>
</div> → 应改为 <header><h2>标题</h2>
<p>作者：张三</p></header>
不是“看起来像文章”就能用
article 表示“可独立分发、复用的内容单元”，关键判断标准是：它脱离当前页面后，是否依然语义完整、可被 RSS 订阅、邮件推送或单独收录？
- 新闻条目、博客正文、产品评价卡片 —— 符合，该用
article
- 首页的“最新三篇”摘要列表 —— 不符合，这是容器，该用
section
- 侧边栏的“相关文章”链接块 —— 不符合，只是导航，该用
aside + nav
误用后果：Google News 抓取失败；RSS 解析器忽略内容；读屏器错误提示“此处为独立文章”，干扰用户预期。
section 的语义是“文档中一个独立的章节”，没有标题就等于告诉机器：“这段内容无法被大纲索引”。后果很实在：
- 屏幕阅读器无法生成有效导航列表（比如按 H2 跳转时漏掉这个区块）
- Chrome DevTools 的 “Accessibility” 面板会标出
section without heading警告 - SEO 工具（如 Lighthouse）直接扣分，影响内容结构评分
补救方式不是硬加 <h2></h2>，而是用 aria-labelledby 关联已有标题，或改用 div——如果这块只是视觉分组，没有逻辑层级。
不止能用在页面顶部
很多人把 header 当成“网站顶栏专用标签”，结果在文章内部、卡片组件里全用 div class="header"，这等于主动放弃结构表达能力：
-
header可以出现在article、section甚至aside内部，表示该区块自己的头部信息 - 里面放
h2+p+time是完全合法且推荐的，比如博客文章头、评论区标题栏 - 滥用
div替代header会导致辅助技术无法区分“全局头部”和“局部头部”，导航混乱
典型误用：<div class="post-header">
<h2>标题</h2>
<p>作者：张三</p>
</div> → 应改为 <header><h2>标题</h2>
<p>作者：张三</p></header>
不是“看起来像文章”就能用
article 表示“可独立分发、复用的内容单元”，关键判断标准是：它脱离当前页面后，是否依然语义完整、可被 RSS 订阅、邮件推送或单独收录？
- 新闻条目、博客正文、产品评价卡片 —— 符合，该用
article - 首页的“最新三篇”摘要列表 —— 不符合，这是容器，该用
section - 侧边栏的“相关文章”链接块 —— 不符合，只是导航，该用
aside+nav
误用后果：Google News 抓取失败；RSS 解析器忽略内容；读屏器错误提示“此处为独立文章”，干扰用户预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
