必须用而非的判断依据是：该内容是否天然带有可命名的主题并出现在文档大纲中；是语义化标签，浏览器和屏幕阅读器识别为“页面或区域的头部”，而无语义，仅用于布局或JS锚点等纯控制场景。

什么时候必须用

而不是

判断依据只有一个：这块内容是否天然带有可命名的主题，并出现在文档大纲中。

• 产品页里的「核心功能」「客户案例」「技术参数」——每个都该是
  ，因为它们各自有
  或
  标题，且可被单独链接或摘要
• 首页上并列的三篇最新文章——每篇都该是
  ，不是
  ；整个“最新文章”容器才是
• 页脚里的社交媒体图标列表、导航栏下拉菜单、表单里的分组字段——这些只是布局/交互单元，用
  + class 更准确
• 如果你给某块内容加了
  却一时想不出标题，大概率说明它不该是
必须配
–
，否则语义断裂。没有标题的
在 NVDA 和 VoiceOver 中基本等于隐身：自动大纲提取工具无法识别，CSS 作用域也失去结构锚点。

和

的本质区别在哪

是语义化标签，浏览器和屏幕阅读器会直接识别为“页面或区域的头部”；

只是一个带 class 的通用容器，语义为零。

• 默认包含 Logo、导航、搜索框等典型头部内容，辅助设备会播报“进入页面头部区域”
• 的 class 名一旦写成 top 或 nav-wrap，其他开发者或爬虫就无法推断用途
• SEO 不会因多一个
  直接加分，但全用
  套娃会让爬虫更难提取核心结构
• 可以嵌套在
  或
  内部，表示该区块自身的头部，而
  无法表达这种层级关系

  哪些场景只能用

  ，硬套语义标签反而出错

  不是过时标签，而是唯一能承担“无语义、纯控制”任务的元素。

  • 做 CSS Grid / Flex 布局的直接父容器：
    —— 语义无关，纯为样式服务
  • 作为 JS 操作锚点：
    、

    —— hook 才重要，语义不重要
  • 包裹 、、WebGL 渲染区 —— 这些本就不属于文档语义流，用
    会误导辅助技术
  • 加载动画、骨架屏占位符：
    —— 没主题、没标题、纯 UI 容器，用

    属于语义污染

    一个快速自查清单：你正在写的这个容器，该选谁？

    对着代码问自己这 4 个问题：

    

    DeepBI DHTML 页面生成器

    生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

    下载

    • 它有没有一个自然、可命名的主题？（比如“用户评论”“配置说明”）→ 有 → 考虑
      或
    • 它是否独立存在、脱离当前页面也能被理解？（比如一篇博客、一条微博）→ 是 →
      更合适
    • 它是否只是为样式、JS 或动画服务，不传达任何内容含义？→ 是 →
      是唯一正解
    • 你能不能立刻给它配上一个
      ～
      ？如果卡住，就别用

    最常被忽略的一点：语义标签不是“越多越好”，而是“刚好够用”。

    嵌套三层以上、
    包着按钮和 loading 图标，往往意味着结构设计本身出了问题，而不是标签选错了。