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

哪些 HTML 标签算语义化标签

语义化标签就是浏览器和开发者都能一眼看懂“它用来干啥”的标签，不是 <div> 或 <code><span></span> 这种纯容器，而是自带含义的：比如 <header></header> 表示页眉，<nav></nav> 表示导航区，<article></article> 表示独立内容块。

常见语义化标签包括：<header></header>、<nav></nav>、<main></main>、<article></article>、<section></section>、<aside></aside>、<footer></footer>、<figure></figure>、<figcaption></figcaption>、<time></time>、<mark></mark> 等。HTML5 引入的这批标签，核心目标是让结构可读、可访问、可索引。

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

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

• 屏幕阅读器用户依赖 <nav></nav> 跳过导航、<main></main> 直达正文——用 <div class="nav"> 就等于关掉了这个能力 <li>搜索引擎对 <code><article></article> 和 <section></section> 内容赋予更高结构权重；纯 <div> 套嵌会让内容层级模糊 <li> <code><time datetime="2024-03-15">3月15日</time> 比 <span>3月15日</span> 更容易被日历工具或爬虫提取时间信息
• 构建可维护组件时，<aside></aside> 明确表达“附属内容”，比 <div class="sidebar"> 更利于团队理解意图 <h3>容易踩的坑：语义≠视觉，别为了样式乱套标签</h3> <p>很多人一上手就犯错：看到设计稿里有个灰色侧边栏，立刻写 <code><aside></aside>；看到顶部有 logo 和搜索框，就包进 <header></header> —— 但语义化标签判断依据是内容作用，不是位置或样式。

  立即学习“前端免费学习笔记（深入）”；

  

  DeepBI DHTML 页面生成器

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

  下载

  常见误用：

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

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

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

  • CSS 中，新标签默认是 inline 元素，要显式设 display: block（不过现代 CSS 重置方案如 Normalize.css 已处理）
  • 用 document.querySelector('main') 没问题，但旧版 jQuery（
  • 服务端渲染时，若模板引擎未声明 HTML5 doctype（），部分浏览器可能触发怪异模式，导致语义标签解析异常
  • 不要在 <main></main> 外再套 <div id="app"> 类似的根容器——<code><main></main> 本身就可以作为 JS 应用挂载点，多一层反而干扰语义流

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