为什么不能只用 ？

用一堆 、 能实现视觉效果，但对机器是“黑盒”：搜索引擎抓不到重点，读屏软件无法准确朗读结构，协作时别人得靠猜 class 名才能理解你的意图。HTML5 结构标签直接把语义“写进标签名”，比如：

浏览器和辅助工具立刻知道这是导航区，无需依赖 class 或注释。

只能出现一次，且不能嵌套在 或

里

这是最容易出错的硬性规则：

表示页面唯一的核心内容容器，必须是 的直接子元素（或仅被 包裹时例外，但极少见）。常见错误：

• 在
  ...
  —— ❌ 违反规范，可能被屏幕阅读器跳过
• 页面中写了两个
  —— ❌ 浏览器不会报错，但 SEO 和无障碍检测工具会警告
• 把页眉/侧边栏塞进
  —— ❌ 它只该装用户真正想看的主体内容（如文章正文、产品列表）

和

的本质区别

二者都表示“一块内容”，但语义层级不同：

• ：可独立存在、可被单独分发的内容单元。例如一篇博客、一条新闻、一个论坛回帖。它自带隐含的“可订阅/可转发”语义
• ：只是文档中的一个逻辑分组，依赖上下文才有意义。比如“技术背景”“性能测试结果”“用户反馈”这些小节，合起来才是完整报告
• 判断口诀：如果把这块内容单独保存为一个文件，扔到另一个网站还能被理解，就用 ；否则用

示例（正确嵌套）：

  
    
如何理解语义化
    
语义化不是为了好看…
    

      
为什么重要
      
对 SEO 和无障碍访问有直接影响…
    
  

移动端和 SEO 不会主动奖励你，但会惩罚语义缺失

没有结构标签，页面照样能显示；但一旦你加了

+ +

，Google 搜索结果页可能展示“跳转到主要内容”快捷链接；iOS VoiceOver 用户双指下滑时能快速定位到

区域——这些都不是玄学，而是解析器真正在用的信号。而最常被忽略的一点： 和结构标签一样，属于「不写不会崩，但写了才真正进入现代 Web 开发」的底线配置。