语义化标签提升可访问性、SEO和性能，应优先使用<header><nav><main><article><section><footer>等，仅在纯样式或逻辑分组时用<div>。

因为语义化标签不是“换个名字”，而是让浏览器、辅助工具和搜索引擎能直接读懂结构意图，而

永远只说“这里有个盒子”。

浏览器解析和DOM节点数直接受影响

每个 <div> 都要创建一个DOM节点，参与样式计算、布局和事件代理。嵌套三层 <div class="wrapper"><div class="inner"><div class="content">...</div></div></div>，比单层 <main>...</main> 多出两倍的解析开销——尤其在低端设备或SSR首屏渲染时，可测出FCP延迟上升。

• 删掉纯容器型 <div class="header">，直接用 <header>：它默认是块级、支持Flex/Grid，无需额外class
• 避免 <section><div><p>...</p></div></section> 这类“语义+无语义”混搭，<section> 本身就能直接放 <p> 或 <h2>
• 检查是否真需要包裹：CSS Grid 容器可以直接写在 <nav> 上，没必要再套 <div class="nav-grid">

屏幕阅读器和SEO不会猜你的class名

当用户用VoiceOver或NVDA浏览页面时，<nav> 会被朗读为“导航区域”，<main> 是“主内容”，而 <div class="nav"> 就是一段静默的空白——除非你手动加 role="navigation"，但那已经绕过语义化本意了。

• 搜索引擎依赖语义标签判断内容权重：<article> 内的 <h1> 比 <div class="post"><h1> 更可能被识别为独立内容主体
• <footer> 包含的版权信息，比 <div id="foot"> 更容易被聚合工具提取
• 错误示例：<div class="article"><h2>标题</h2><p>正文</p></div> —— 这里没有语义锚点，RSS抓取器无法判定这是可订阅单元

哪些地方必须保留 <div>？别硬套语义标签

语义化不是消灭 <div>，而是让它回归本职：当结构纯粹服务样式、逻辑分组或交互状态，而非内容含义时，<div> 反而是最干净的选择。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• Flex/Grid 的 wrapper：如果内部只是对齐和间距控制，没标题、没独立主题，就用 <div class="grid">，别硬套 <section>
• Vue/React 组件外壳：如 <Card> 渲染出的外层 <div>，语义由子内容决定，外层不加 <article>
• ARIA 区域包装：比如搜索框组合 <div role="search" aria-label="站内搜索">，比塞进 <section> 更精准
• 轮播图容器：子项是状态切换的一部分，不是独立内容单元，用 <div class="carousel"> + ARIA 属性比堆 <section><section> 合理得多

真正难的不是“该用哪个标签”，而是每次写结构前问一句：这个区块，如果去掉所有CSS和JS，它在纯文本里还承担什么信息角色？答案指向语义标签；答案是“只是为了让按钮居中”，那就老实用 <div>。