HTML5结构标签是语义化标签，用于明确内容角色；不能只用，否则影响SEO、无障碍访问和协作效率；只能出现一次且须为直接子元素。
为什么不能只用 ？
用一堆 、 能实现视觉效果，但对机器是“黑盒”：搜索引擎抓不到重点，读屏软件无法准确朗读结构，协作时别人得靠猜 class 名才能理解你的意图。HTML5 结构标签直接把语义“写进标签名”，比如：浏览器和辅助工具立刻知道这是导航区，无需依赖 class 或注释。
这是最容易出错的硬性规则：
- 在
...
- 页面中写了两个
- 把页眉/侧边栏塞进
二者都表示“一块内容”，但语义层级不同：
-
-
- 判断口诀：如果把这块内容单独保存为一个文件，扔到另一个网站还能被理解，就用
示例（正确嵌套）：
如何理解语义化
语义化不是为了好看…
为什么重要
对 SEO 和无障碍访问有直接影响…
立即学习“前端免费学习笔记（深入）”；
移动端和 SEO 不会主动奖励你，但会惩罚语义缺失
没有结构标签，页面照样能显示；但一旦你加了
用一堆 这是最容易出错的硬性规则： 二者都表示“一块内容”，但语义层级不同： 示例（正确嵌套）： 语义化不是为了好看… 对 SEO 和无障碍访问有直接影响… 立即学习“前端免费学习笔记（深入）”； 没有结构标签，页面照样能显示；但一旦你加了
只能出现一次，且不能嵌套在 或 里 表示页面唯一的核心内容容器，必须是 的直接子元素（或仅被 包裹时例外，但极少见）。常见错误：
—— ❌ 浏览器不会报错，但 SEO 和无障碍检测工具会警告 —— ❌ 它只该装用户真正想看的主体内容（如文章正文、产品列表）
和 的本质区别
：可独立存在、可被单独分发的内容单元。例如一篇博客、一条新闻、一个论坛回帖。它自带隐含的“可订阅/可转发”语义：只是文档中的一个逻辑分组，依赖上下文才有意义。比如“技术背景”“性能测试结果”“用户反馈”这些小节，合起来才是完整报告；否则用
如何理解语义化
为什么重要
移动端和 SEO 不会主动奖励你，但会惩罚语义缺失
+ ，Google 搜索结果页可能展示“跳转到主要内容”快捷链接；iOS VoiceOver 用户双指下滑时能快速定位到 区域——这些都不是玄学，而是解析器真正在用的信号。而最常被忽略的一点： 和结构标签一样，属于「不写不会崩，但写了才真正进入现代 Web 开发」的底线配置。
