html5中div和span属无语义容器，应依内容意图替换：header/nav/main/aside/footer替代功能明确的div；纯样式包装、组件外壳、aria区域及复合交互模块等场景须保留div。
HTML5 中没有“非语义标签”这个官方分类，但实际开发中大量使用的 <div> 和 <code><span></span> 确实属于无语义容器。替换的关键不是“一律消灭 div”，而是根据内容意图，用更准确的语义标签表达结构目的。
哪些 div 必须替换成语义标签
当 <div> 承载明确功能角色时，应优先替换：
<ul><li><code><div id="header"> 或 <code><div class="top-nav"> → 改用 <code><header></header> 和 <nav></nav>
<div id="main-content"> → 改用 <code><main></main>（全页仅一个）
<div class="sidebar"> → 改用 <code><aside></aside>（需确认内容是否为附属、可选信息）
<div id="footer"> → 改用 <code><footer></footer>（整页或 article 内均可出现）
哪些 div 不该强行替换
以下场景保留 <div> 是正确且必要的：
<ul>
<li>纯样式包装层：如 Flex 容器、Grid wrapper，内部无标题、无独立主题，只负责对齐和间距</li>
<li>组件外壳：Vue/React 中封装的卡片、弹窗、骨架屏，语义由内部内容决定，外层无需强加 <code><article></article> 或 <section></section>
<div role="region" aria-labelledby="search-label">，比硬套 <code><section></section> 更精准传达交互意图
section 和 article 别乱套
这两个标签最容易误用，判断依据很实在：
-
<article></article>：删掉周围其他内容后，这块还能被单独发布、订阅、转发或抓取吗？能——比如博客正文、新闻稿、用户评论 -
<section></section>：必须有明确主题，且必须配<h2>–<h6></h6> </h2>标题；它依附于上下文，比如“技术参数”“客户评价汇总”，不能脱离页面存在 - 单张图片、一个按钮、一段装饰文字，都不构成
<section></section>；强行包裹反而稀释真实内容的语义浓度
别踩这些常见坑
看似小细节，却直接影响语义有效性：
- 不存在
<search></search>标签——正确写法是<form role="search"></form>+<input type="search">+<label></label> -
<img src="x">是非法嵌套，必须写成自闭合形式：<img src="x" alt="..."> -
<b></b>和<i></i>没被废弃，但语义弱于<strong></strong>和<em></em>；强调语气用后者，纯样式加粗/斜体才考虑前者 - 自定义标签如
<my-header></my-header>浏览器不识别语义，无障碍树中无 role，仅作普通 HTMLElement 处理
