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