语义化标签是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>—— 但语义化标签判断依据是内容作用，不是位置或样式。立即学习“前端免费学习笔记（深入）”；
常见误用：
-
<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> - CSS 中，新标签默认是 inline 元素，要显式设
display: block（不过现代 CSS 重置方案如 Normalize.css 已处理） - 用
document.querySelector('main')没问题，但旧版 jQuery（ - 服务端渲染时，若模板引擎未声明 HTML5 doctype（
），部分浏览器可能触发怪异模式，导致语义标签解析异常 - 不要在
<main></main>外再套<div id="app"> 类似的根容器——<code><main></main>本身就可以作为 JS 应用挂载点，多一层反而干扰语义流语义化最难的不是记住标签名，而是每次写标签前，先问一句：这个元素在文档结构里承担什么角色？而不是它看起来像什么。
兼容性和 DOM 操作要注意什么
老版本 IE（IE8 及以下）不识别 HTML5 语义标签，但现代项目基本不用考虑。真正需要注意的是 JavaScript 操作和 CSS 重置：
-
