多特姚1. 先搞清楚：你平时写div的时候，到底在表达什么
入行前几年，我写页面基本靠一把梭：哪里需要换行、哪里需要调间距、哪里需要包一层来写样式，顺手就是一个div。后来接手一个老项目，打开开发者工具一看，满屏的div嵌套div，再往下数，七八层不止。当时就一个感觉：这页面是div养蛊养出来的吧。
后来慢慢接触HTML5的语义化标签，才开始理解一个问题：div不是一个用来"划分页面区域"的标签，它只是CSS样式的一个挂载点。而真正用来表达"这块区域是干什么的"的标签，是section、article、nav、header、footer这些带语义的元素。
这个误区非常普遍。很多人知道section这个标签存在，但不知道它和div到底差在哪，于是形成了两派：一派死守div，页面全部用div堆；另一派走向另一个极端，是个区块就套section，结果section也烂大街了。
这篇内容我不讲虚的，直接从实际开发的角度，把section和div的区别、使用场景、判断标准、以及整张页面应该怎么用语义化标签划分区域，一次讲清楚。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. section和div的本质区别：语义容器和无意义容器的分界
2.1 section的真实含义，不只是一个"带语义的div"
section在HTML5规范里的定义是：文档或应用中的一个独立区块，这个区块通常是一个主题性内容的分组，并且一般会带一个标题。
注意几个关键词：独立区块、主题性分组、一般有标题。
什么意思？我用一个生活案例来解释。你写一篇博客文章，文章分成三个部分：背景介绍、方案设计、实验结论。这三个部分各有各的主题，内部逻辑自洽，彼此之间有明确的边界。这时候，这三个部分就应该用section来表达。
再看W3C规范里的明确说明：section不是通用的容器元素。如果只是为样式需要或者脚本需要而分组，应该用div。
这句话是官方给的判断准则。也就是说，section的使用前提是：这个区块在文档结构中具有独立的意义，它值得被单独识别出来。换句话说，section代表的是一种结构上的归属，而div代表的仅仅是视觉或逻辑上的隔离。
所以，不要把section理解为"带语义的div"。它们的定位完全不同。
2.2 div的定位：所有标签的大本营
div这个元素从HTML 3.0时代就存在了，它最初的设计目的就是"分割文档区域"，但它的语义是空白的。HTML5规范对div的定义是：div元素没有特殊含义，它纯粹表示它的子元素集合。
这句话翻译一下：div就是一块白板。你可以在上面叠样式、挂事件、写脚本，它不会对搜索引擎和辅助技术传递任何内容含义。它存在的价值就是当一个容器，方便开发者做布局和样式控制。
举个例子，你要做一个卡片组件，里面有图标、标题、描述文字。这一堆内容打包成一个卡片，在视觉上是一个整体，你可以用div包起来，加上card的class，然后在CSS里控制它的背景色、圆角、阴影。这个div有没有语义？没有。它只是把一个组合框起来了，目的是为样式服务。
你可以把div理解为仓库里的收纳箱。箱子本身没有内容属性，你往里装什么都行，装玩具也可以、装文件也可以。它负责的是把东西码整齐，不让散落一地。
而section理解成什么呢？理解成一本书的章节。一个章节之所以能成为章节，是因为它有自己的主题、有自己的标题、有独立的内容组织逻辑。哪怕两个章节的排版样式完全一样，它们依然是两个不同的章节，因为它们表达的内容是不同的。
2.3 从一段简单代码看语义层的差异
我用同一个页面区块的两种写法，来说明语义层面的差别。
首先是纯div写法：
html复制<div class="chapter">
<div class="title">项目背景</div>
<div class="content">
<p>当前系统在高峰期存在响应慢的问题……</p>
<p>通过对日志的分析，我们发现主要瓶颈集中在数据库查询环节……</p>
</div>
</div>
然后是使用section的写法：
html复制<section class="chapter">
<h2>项目背景</h2>
<div class="content">
<p>当前系统在高峰期存在响应慢的问题……</p>
<p>通过对日志的分析，我们发现主要瓶颈集中在数据库查询环节……</p>
</div>
</section>
两段代码在浏览器里显示的效果可能完全一样，但如果把页面交给一个不懂视觉、只看代码的程序员，或者交给一个走查页面的测试工程师，他能从第一段代码里快速判断出"项目背景"是一个独立的内容区块吗？很难。因为div不会告诉任何人"这块内容是一个章节"。
而从第二段代码里，section的存在本身就在声明：这里是一个独立主题的区块。再配合h2标题，任何人都能一眼看出来这个区域的结构定位。
这就是语义化标签的价值。它不是在给浏览器看的，也不全是给开发者看的，而是给搜索引擎、屏幕阅读器、以及未来的维护者看的。
3. 什么时候用section，什么时候用div：一套可以直接抄的判断标准
3.1 三个必问问题
在动手写标签之前，先问自己三个问题。三个问题都过一遍，基本就能做出选择。
第一个问题：这块内容在文档结构中，是否构成一个独立的主题块？比如，页面上有"产品特性"和"客户案例"两个板块，它们各自有明确主题，彼此没有重叠，那它们各自都可以是section。
第二个问题：这个区块能不能配一个标题？注意，这里说的标题不一定是页面上必须显示出来的大字标题，而是指从内容逻辑上，这个区块是否有一个能概括它的名称。比如"产品特性"这个区块，它的标题就是"产品特性"；"底部导航"这个区块，它的标题可以是"页脚导航"。如果一个区块连名字都想不出来，那它大概率不配成为section。
第三个问题：去掉包裹层之后，里面的内容是否依然能独立成立？如果答案是能，说明这个包裹层是结构性的，可以考虑section；如果答案是"这些内容本来就是一坨，包起来只是为了方便写样式"，那就老老实实用div。
3.2 直接用div的场景：纯粹的样式容器
以下这些常见的场景，直接用div没问题：
- 网格布局中每个格子需要的外层包裹
- 横向轮播图里每一张幻灯片的外壳
- 图标和文字组合成按钮的容器
- 任何形式CSS绝对定位的参照物
- 用flex做垂直水平居中时，内容外面的"推手"
这些场景的共同特点是：包裹层本身没有内容主题，它的存在完全是为布局和样式服务的。你给这个包裹层取名字的时候，脑子里想的也是"外层的盒子""内层的盒子"，而不是"这个区块表达什么主题"。
我经常跟团队的人说一句话：如果你给这个容器取class名的时候，下意识想用box、wrap、container这些词，那大概率就该用div。
3.3 一定要用section的场景：内容主题独立
反过来，下面这些场景就应该用section：
- 首页的"产品介绍"区域
- 详情页的"用户评论"区块
- 文章页面里的"引言"部分
- 落地页里的"价格方案"区块
- 任何一个有独立标题、独立内容结构的段落
判断标准就一条：把这些内容从页面中抽离出来，单独放到一个空白文档里，如果依然能算是一段完整的内容，它就是section。
这里还有一个重要的实践经验：不要因为"某个区块在页面里看起来很大"就用section，也不要因为"这个区块比较小"就不敢用。section和区块大小无关，和内容主题是否独立有关。页面上几行字的"版权声明"，如果单独拆出来看，它是"版权信息"这个主题，那它同样可以用section来包裹。
3.4 一个对比示例，帮你快速建立直觉
我直接放一段两栏布局的代码。左边是产品图片，右边是产品简介，下面是相关推荐。三层结构，我分别标注出它们该用什么标签：
html复制<section>
<h2>商品详情</h2>
<div class="product-layout">
<div class="product-image">
<img src="product.jpg" alt="商品主图">
</div>
<div class="product-info">
<p>商品名称：无线机械键盘</p>
<p>商品编号：KB-2024-01</p>
</div>
</div>
</section>
<section>
<h2>相关推荐</h2>
<div class="recommend-grid">
<div class="recommend-item">推荐商品A</div>
<div class="recommend-item">推荐商品B</div>
</div>
</section>
你看看这组嵌套关系："商品详情"是一个独立主题，用section包起来；里面的布局容器，不管是一列还是两列，都属于布局需求，用div；"相关推荐"又是一个独立主题，再开一个section。
这样一层层写下来，结构语义就非常清晰了：section负责表达"页面上有哪些内容板块"，div负责表达"板块内部怎么排版和布局"。两种标签各司其职，不打架、不混淆。
4. 完整的页面区域划分实战：HTML5语义标签全家桶
4.1 标准页面结构长什么样
说完了section和div的区别，再把视野拉高一点：一张完整的页面，应该怎么划分区域？
HTML5提供了一套完整的语义化标签家族，除了section和div，还有header、nav、main、article、aside、footer。下面是一个典型的内容型页面的骨架代码：
html复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语义化页面结构示例</title>
</head>
<body>
<header>
<div class="logo">站点Logo</div>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>博客文章标题</h1>
<p>发布时间：2024年5月20日</p>
<section>
<h2>背景介绍</h2>
<p>这里是背景内容的文字。</p>
</section>
<section>
<h2>方案分析</h2>
<p>这里是方案分析的文字。</p>
</section>
</article>
<aside>
<h2>相关文章</h2>
<ul>
<li><a href="#">推荐文章一</a></li>
<li><a href="#">推荐文章二</a></li>
</ul>
</aside>
</main>
<footer>
<p>版权信息</p>
</footer>
</body>
</html>
这套结构覆盖了一张内容型页面最常见的区域划分方式。我逐个标签拆开说。
4.2 header、nav、main、article、aside、footer如何配合
header：页面头部区域，通常放站点的Logo、导航、搜索框等信息。注意一点，header在HTML5里不只有一个，article里也可以有自己的header。凡是"某一个独立内容的开头部分"，都可以用header表达。
nav：主导航区域。它专门用来放页面主要导航链接。页脚里偶尔也会放一组辅助链接，规范允许在footer里放nav，但要注意别把所有的a标签都塞进nav。一个页面上nav的数量尽量不要太多，一般一两处是合理的。
main：页面的主体内容区域，一个页面最多只能有一个main。它是文档的核心内容的所在地，应该排除掉导航、页脚、侧边广告这类重复出现的内容。
article：表示一个完整的、独立成文的组合体。什么叫"独立成文"？就是它自己拿出来，可以单独作为一个内容单元。典型的场景是：一篇博客文章、一条论坛帖子、一条新闻、一个商品卡片、甚至一条评论。
aside：侧边栏区域，放一些与主要内容相关但不是必需的内容，比如相关推荐、广告位、目录索引、作者简介等。
footer：页脚区域，一般放版权信息、备案信息、联系方式等。
header、nav、main、footer这几个标签，合起来就是一张页面的"框"。整个页面的大骨架出来了，再往里面填充内容。
4.3 section和article的区别：一定要分清楚
很多初学者会把section和article混为一谈，因为这两个标签都是"包裹一块内容"。但实际上它们的定位差异非常大。
article强调"独立性"和"可复用性"。把一段内容从页面里拿出来，放到任何一个其他页面上，它依然是一条完整的内容，那它就是article。比如你写了一篇博客文章，这篇文章发到任何技术社区、任何个人博客站，它都还是一篇完整的文章，这就是article。
section强调的是"主题分组"。它是一块内容的内部组织方式。比如一篇文章里分了几章，每章有自己的小标题，这些"章"就是section。也就是说，article是一个"完整的内容单元"，而section是内容单元内部的"章节结构"。
判断方法：从二者的从属关系来思考。article里可以有多个section，比如一篇长文章分成几个章节；section里不应该反过来装多个article。这是一个比较硬性的经验判断。官网首页通常会有若干个内容板块（产品介绍、客户评价、合作案例），每一个板块都是section；点进去某个具体的博客详情页，那一整篇文章是article，文章里面的小章节就是section。
4.4 语义化标签对SEO和无障碍的影响
经常有人问我：用section和div，对网站排名有影响吗？我的回答是：不要指望语义化标签直接提高关键词排名，但语义化标签对SEO确实有间接且重要的帮助。
搜索引擎的爬虫在理解页面内容时，除了分析关键词、外链、页面质量这些因素，还会尝试理解页面的内容结构。一个表达清晰的页面结构，有助于爬虫更准确地识别"哪个部分是核心内容""这个页面的主题层级是什么"。标题的层级（h1到h6）和section的组织方式，配合起来可以向搜索引擎传递页面的话题结构。
更重要的是无障碍访问。屏幕阅读器用户在浏览页面时，可以借助标记为地标这些语义化结构快速跳转到页面的不同区域。W3C的规范对landmark有明确的定义：nav、main、aside、footer这些元素自带地标角色，section在指定了可访问名称后也能成为地标。而div和span是没有任何地标语义的。
换句话说，如果你坚持全站用div堆页面，视觉上可能没什么问题，但依赖屏幕阅读器的用户在浏览你的网站时，体验会差很多。他们想跳过导航直接看正文，但没有地标可以跳转，只能一个字一个字地听完整个导航菜单。
5. 实际操作中高频踩坑与排查实录
5.1 坑1：section里面没有标题，结构表里全是"未命名区块"
这是我见过的最常见的坑。有人知道用section比div高级，于是全部换成section，但section里既没有h2，也没有任何能代表区块名称的文本节点。这样的section在浏览器解析后，进入文档大纲里的表现就是一个未命名的区块，对SEO和屏幕阅读器毫无帮助。
W3C规范对section有一个很直白的提示：如果section里没有标题，那它就非常可疑。规范原文建议：当一个section里没有标题时，不要用section，改用div再辅以class或aria-label。
所以，每写一个section之前，先看一眼里面有没有标题。如果没有，塞一个标题进去，或者在样式允许的情况下用h2加sr-only类把标题视觉隐藏（但保留给屏幕阅读器）。如果这两种方案都做不到，直接把section改成div，彻底放弃这个区块的语义。
这个坑很容易在调试时发现。用浏览器的"网页大纲扩展工具"查看页面结构，如果看到一堆unnamed section，说明你中招了。
5.2 坑2：div刷满全页面，样式引用全部失效
还有一个常见问题是，全套用div的页面在开发后期想局部改成section，结果发现CSS全乱了。原因很简单：section是块级元素，默认display:block，和div的默认表现完全一致，理论上样式不会乱。
那为什么会乱？仔细排查的话，大概率是之前全是一层层div嵌套，某些选择器用了父子级联关系，比如div > div > div这种结构选择器。你换掉其中一层后，选择器匹配不上了，样式自然丢。这本质上是代码耦合问题，不是语义化标签的问题。
我的建议是：不要在半路大规模把div替换成section。正确的做法是在新页面开发时就直接规划好语义结构，老页面保持稳定，等真正需要重构的时候再统一改。否则改到一半，样式丢得你想摔键盘。
5.3 坑3：section里面嵌套section，层级过深
另外一个高频问题是section套section套section，套出一个万层塔。有主题分组的意识是好事，但过度使用会导致文档大纲非常冗长，肉眼检查页面时也容易被层级搞晕。
section的嵌套在规范上是允许的，比如文章里先分了几大部分，每部分内部再分几个小节，那section套section是合理的。
但如果你的嵌套层级超过三层，而且每一层section的标题用词高度重复（比如都叫"详情""更多"），那说明你的内容组织可能有问题。这时候应该重新审视一下内容结构，而不是继续往下套。
5.4 坑4：误以为section和div的差异会影响视觉效果
这里要强调一个很多人忽略的事实：section和div在浏览器默认样式上没有任何视觉差异。它们都是display:block，都是从新的一行开始，都占满父容器的宽度。
所以，你改完标签之后，页面看起来是"没变化"的。不要因此怀疑自己改错了。语义化的价值不在视觉层，而在结构层、可访问性和可维护性层。视觉效果不变是正常的、也是正确的。如果因为改标签导致视觉效果变了，那倒是要检查一下CSS选择器是不是用了标签名。
6. 一步步优化你自己的页面：语义化改造实操
6.1 用div写好的页面怎么改造成语义化结构
如果你手头有一个用div堆出来的老页面，想改造成语义化结构，我提供一个稳妥的步骤，按这个顺序来，风险和改动量都能控制住。
第一步，先加一个大骨架。在body内部，把与页面头部相关的div替换成header，把底部版权区整块div替换成footer。页面中间的div先不动，全部保留。
第二步，加main。找到页面的主体内容区域，也就是除去头部导航和页脚之外的那一大块div。如果页面上有sidebar，可以把sidebar单独拆出去，剩下的核心内容区域用main包裹起来。
第三步，定导航。找到页面顶部的导航菜单条，把装菜单的外层div换成nav。注意nav里面通常是ul列表加a标签，这一层不用动。
第四步，处理article。如果页面里包含"一篇完整的文章""一条完整的帖子""一个独立的商品卡片"这类结构，把对应的外层div改成article。
第五步，划分section。进入页面主体内容内部，看看有没有可以归纳出独立主题的区块。比如首页有"公司介绍""产品服务""客户案例""新闻动态"这几个模块，就把每个模块的外层div分别改成section，并确保每个section内部有对应的标题标签。
第六步，改完每一层，立刻去浏览器里刷新看样式。出现布局变动，第一时间检查有没有用到标签选择器，比如div.classList这种格式。做过前端的人应该都知道，写这种选择器是在给自己埋雷。
这是我给团队的通用改造流程。整套流程跑下来，对样式的破坏性极低，而且每一步都能在浏览器里即时验证。
6.2 验证改造效果：用工具检查页面大纲结构
改造完以后，怎么验证自己做对了？有一个很实用的方法：在Chrome浏览器中安装一个网页结构大纲扩展工具（例如HTML5 Outliner之类的扩展），然后打开页面，工具会自动生成一份页面的大纲树。如果大纲树的节点有清晰的命名，没有出现"Untitled Section"的悬挂节点，就说明你的语义化结构基本是合格的。
另外一个验证方法更简单：用屏幕阅读器体验一下。Windows系统自带的讲述人也好，别小看这个验证方式。当你用读屏软件浏览自己的页面时，如果它能直接跳到标题、跳到正文、跳过导航，说明语义标签发挥作用了。这种体验上的提升，我建议每个人都亲自感受一次。
6.3 关于div和section的最终经验总结
我在实际开发中的体会是，这两个标签的取舍其实并不难。记住一句话：section表达结构性主题，div表达布局性容器。你写页面的时候，先想清楚当前这个标签要承担什么职责，再决定用哪一个。
如果给一个刚从div套娃里走出来的初学者的建议，我会说：在你还没熟练使用section之前，宁可用div，也不要乱用section。因为一个不合适的section比一个普通的div更让人困惑。当你用div的时间久了，自然会开始回答"我为什么需要这个div"这个问题，一旦开始思考，语义化的大门自然就打开了。
这就像做菜。div是基础版的锅，什么菜都能煮。section是功能锅，专门适合做一些特定菜式。新手刚上手，一口普通锅足够应付大多数场景。等你想清楚了每种锅适合做什么菜、什么时候换锅、换完锅会不会影响火候，你才算真正掌握了厨房里的讲究。HTML标签划分页面区域，说到底也是这个道理。