用<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>——零成本，收益无穷。
