语义化标签替换div的核心是让区块“开口说话”：header用于顶部区域，nav用于主导航，main全页唯一且不嵌套，section需带标题表逻辑分组，article代表独立可分发内容，aside处理侧边栏，footer用于页脚；误用会破坏无障碍与SEO。
直接用语义化标签代替 div，不是换个名字而已，而是让每个区块“开口说话”——告诉浏览器、搜索引擎和屏幕阅读器“我是什么、我干什么”。关键不在多写几个字，而在选对标签、理清层级、守住边界。
先分清哪些 div 可以且应该被替换
不是所有 div 都要删，但以下几类常见场景，基本都有更合适的语义标签：
- 页面顶部区域（含 logo、标题、主导航）→ 用 header，不是
<div class="header"> <li>主导航链接集合 → 用 <strong>nav</strong>，哪怕里面套了 ul/li，它本身已表明“这是导航”</li> <li>整页唯一的核心内容区 → 用 <strong>main</strong>，一个页面只出现一次，不能嵌套在 article 或 section 里当容器</li> <li>有明确主题的一组内容（比如“关于我们”“服务列表”“客户案例”）→ 用 <strong>section</strong>，且内部建议带 h2/h3 标题</li> <li>独立、可复用、能单独分发的内容单元（如一篇博客、一条新闻、一个商品卡片）→ 用 <strong>article</strong> </li> <li>侧边栏（相关链接、作者信息、广告、分类目录）→ 用 <strong>aside</strong>，而不是 <code><div class="sidebar"> <li>页面底部（版权、备案号、联系方式）→ 用 <strong>footer</strong>，注意它既可以是整个页面的页脚，也可以是某个 article 或 section 的局部页脚</li> <h3>别踩这些典型结构陷阱</h3> <p>语义标签一旦用错，反而比 div 更误导。几个高频翻车点：</p> <ul> <li> <strong>main 里再套 header/footer</strong>：main 表示“主体内容”，它的 header 是内容自身的标题（如文章标题），不是全站页眉；全站页眉应放在 main 外层的独立 <header> 中</header> </li> <li> <strong>section 当样式盒子用</strong>：如果一段内容没有主题、没配标题、只是为了左右分栏或加背景色，那就该用 div，而不是硬塞个 section</li> <li> <strong>nav 放在 footer 里就失效</strong>：nav 必须表达“主导航意图”，页脚里的“友情链接”属于辅助信息，更适合用 aside 或普通 ul，加 aria-label="友情链接" 更准确</li> <li> <strong>多个 main 标签</strong>：W3C 明确规定一个页面只能有一个 main，重复使用会破坏辅助技术的焦点逻辑</li> </ul> <h3>搭配 CSS 时保持语义不打折</h3> <p>用 Grid 或 Flex 布局时，别为了“好写样式”又退回到 div 套路：</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a> <p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur</p> </div> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li>把 <strong>grid-template-areas</strong> 和语义标签对齐：比如 <code>grid-template-areas: "header" "nav" "main" "footer"，对应真实的 header/nav/main/footer 元素 - 避免给语义标签加 class="row" 或 class="col-6" 这类纯布局类名，它们会模糊语义；用 grid-area 或自定义语义类名（如 class="featured-section"）更稳妥
- DOM 顺序要和视觉逻辑一致：比如主内容在左、侧边栏在右，HTML 中仍应把
写在
实在没合适标签？div 依然合法
HTML5 并没废除 div。它的定位很清晰：当一段内容纯粹是“分区”用途，没有标题、不构成独立主题、也不承担导航/页眉/页脚等角色时，div 就是最诚实的选择。例如：
- 一个用来包裹动画效果的过渡容器
- 表单里一组 radio 按钮的外层分组（可用 fieldset 更好，但 div 也可接受）
- JS 动态插入内容的挂载点，暂无语义含义
这时候用 div 不丢人，硬套 section 或 article 才真有问题。
