用<section>而不是<div>,核心原因就三个字:让机器读懂你的网页结构。
想象你写了一篇论文,<div>是白纸,<section>是带标题的章节卡片——人眼能猜,但屏幕阅读器和搜索引擎需要明确信号。
不用<section>的代价(真实场景)
场景 1:视障用户用屏幕阅读器
<!-- ❌ 全用 div → 读屏软件报:"div, div, div, div..." --><divclass="chapter">变量声明</div><divclass="content">...</div><divclass="chapter">函数定义</div><divclass="content">...</div><!-- ✅ 用 section → 读屏软件报:"章节, 变量声明, 章节, 函数定义..." --><section><h2>变量声明</h2><p>...</p></section>结果:用<section>能让视障用户一键跳转到“第3章节”,用<div>只能逐个词听,根本不知道哪里是章节边界。
场景 2:搜索引擎抓取你的博客
Google 爬虫看到<section>会认定:“这是独立主题块,标题<h2>是核心关键词,权重加分。”
看到<div>则想:“这只是布局容器,标题可能是侧边栏广告,权重降低。”
直接影响 SEO 排名。
场景 3:代码维护
三个月后你回头看代码:
<section><!-- 一眼看出:这里是一个功能模块 --><h3>登录表单</h3>...</section><div><!-- 你看完所有子元素才能猜:哦这是个登录区域 --><h3>登录表单</h3>...</div><section>的“隐形福利”清单
| 福利 | 说明 | 不用<section>的后果 |
|---|---|---|
| 文档大纲 | 浏览器自动生成页面目录结构 | SEO 和无障碍大纲混乱 |
| 快捷键导航 | 屏幕阅读器支持按章节跳转 | 用户只能逐行听,效率极低 |
| 语义化缓存 | 智能浏览器可预加载独立章节 | 无法识别内容优先级 |
| 团队协作 | 新人看到<section>就懂模块边界 | 需要注释才能解释 div 用途 |
一句话总结<div>是哑巴盒子,<section>是自报家门的智能盒子。
当你希望内容被理解、被索引、被无障碍访问时,用<section>;当你只是画个框、排个版,用<div>。
记住:有标题的独立内容块,无脑用<section>——零成本,收益无穷。