语义化标签比<div>多了明确的结构和功能语义，使浏览器、辅助技术和搜索引擎能准确理解内容角色与关系，提升可访问性、SEO和团队协作效率。
语义化标签比 <div> 多了什么信息？
浏览器和辅助技术（比如读屏软件）不靠视觉样式理解页面，而是依赖标签的语义。用 <header>、<nav>、<main>、<article>、<section>、<aside>、<footer> 这些标签，等于直接告诉它们“这部分是导航”“这是主内容区”“这是侧边栏”。而 <div> 什么也不说，只表示“这里有个块级容器”。
实际影响包括：
- 屏幕阅读器能生成更准确的页面结构导航（例如跳转到下一个
<nav>） -
搜索引擎更容易识别内容主次（
<main>内容权重通常高于<aside>） - 团队协作时，
<article>比<div class="post">更容易被新成员一眼看懂用途
<section> 和 <div> 到底该选哪个？
关键看有没有「独立主题」和「可被大纲工具识别」的需求。HTML5 规范明确：一个 <section> 应该有标题（<h1>–<h6>），且其内容在逻辑上构成一个独立单元（比如“用户评论区”“产品参数表”）。没有标题或纯为布局/样式包裹的，就该用 <div>。
常见误用：
立即学习“前端免费学习笔记（深入）”；
- 把整个轮播图外层包成
<section>，但里面没标题 → 应该用<div> - 把多个并列的卡片列表用一个
<section>包住，但每张卡片本身才是独立内容 → 每张卡片用<article>，外层用<section>并加<h2>热门商品</h2> - 为实现 margin/padding 而套一层
<section>→ 必须换回<div>
哪些场景必须用语义标签，不能用 <div> 替代？
不是所有地方都能自由替换。以下情况若强行用 <div>，会破坏可访问性或违反规范：
-
<nav>：页面导航链接集合。用<div class="nav">后，读屏软件无法自动识别这是导航区，用户无法用快捷键跳转 -
<main>：页面唯一主内容区。WAI-ARIA 要求每个页面只能有一个<main>，且不能嵌套；用<div role="main">虽然功能近似，但原生标签更可靠、无需额外 ARIA 属性 -
<figure>+<figcaption>：图片/图表与其说明文字的绑定关系。用<div>无法表达这种语义关联，对 SEO 和无障碍都不利
这些标签的 DOM 行为与 <div> 完全一致（都是块级、无默认样式、不影响 JS 操作），区别只在语义和默认隐含的 ARIA role。
实际项目中怎么快速决定用哪个？
别查文档，用两个问题现场判断：
- 这个区块是否在整页中承担明确角色（如“顶部栏”“底部版权”“文章正文”）？→ 是，优先选对应语义标签
- 这个区块是否只为控制样式、JS 绑定或响应式断点而存在（比如为了加
margin-bottom: 2rem或data-slider-target）？→ 是，必须用<div>
遇到模糊地带（比如一个带标题的卡片容器），先写 <section>，再检查它是否满足「有标题 + 独立主题」；不满足就退回到 <div>。宁可少用，也不要滥用 <section> 或 <article>。
最后提醒一句：语义标签不是越多越好，<div> 在现代 HTML 中依然大量且合理地存在——它的职责就是“无语义容器”，这点从未改变。
