语义化标签是HTML5引入的具有明确含义的标签，如、、、、、、等，用于提升可读性、可访问性与SEO效果。

哪些 HTML 标签算语义化标签

语义化标签就是浏览器和开发者都能一眼看懂“它用来干啥”的标签，不是

或 这种纯容器，而是自带含义的：比如

表示页眉，

表示导航区，

表示独立内容块。

常见语义化标签包括：

、

、

、

、

、

、

、

、

、、 等。HTML5 引入的这批标签，核心目标是让结构可读、可访问、可索引。

什么时候必须用语义化标签，而不是 div

不是所有地方都得强换，但以下场景不用语义化标签，会直接带来实际问题：

• 屏幕阅读器用户依赖
  跳过导航、
  直达正文——用
  就等于关掉了这个能力
• 搜索引擎对
  和
  内容赋予更高结构权重；纯
  套嵌会让内容层级模糊
• 3月15日 比 3月15日 更容易被日历工具或爬虫提取时间信息
• 构建可维护组件时，
  明确表达“附属内容”，比
  更利于团队理解意图

  容易踩的坑：语义≠视觉，别为了样式乱套标签

  很多人一上手就犯错：看到设计稿里有个灰色侧边栏，立刻写

  ；看到顶部有 logo 和搜索框，就包进

  —— 但语义化标签判断依据是内容作用，不是位置或样式。

  常见误用：

  

  DeepBI DHTML 页面生成器

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

  下载

  • 不等于“页面最上面那条横条”：一个
    内部也能有
    （比如文章标题+作者信息）
  • 不是“分块容器”：它要求内部内容有逻辑主题，且应有标题（
    ~
    ），否则不如用
  • 和
    混用：博客正文用
    ，但“相关推荐”列表只是附属内容，该用
    或
    （带标题时）
  • 把
    塞进
    里没问题，但若页脚只有备案号和联系方式，没有导航链接，就别硬加

  兼容性和 DOM 操作要注意什么

  老版本 IE（IE8 及以下）不识别 HTML5 语义标签，但现代项目基本不用考虑。真正需要注意的是 JavaScript 操作和 CSS 重置：

  • CSS 中，新标签默认是 inline 元素，要显式设 display: block（不过现代 CSS 重置方案如 Normalize.css 已处理）
  • 用 document.querySelector('main') 没问题，但旧版 jQuery（
  • 服务端渲染时，若模板引擎未声明 HTML5 doctype（），部分浏览器可能触发怪异模式，导致语义标签解析异常
  • 不要在
    外再套
    类似的根容器——

    本身就可以作为 JS 应用挂载点，多一层反而干扰语义流

    语义化最难的不是记住标签名，而是每次写标签前，先问一句：这个元素在文档结构里承担什么角色？而不是它看起来像什么。