HTML5语义化标签必须依据内容意图选用，而非盲目替换div；div适用于纯布局容器、动态组件外壳、ARIA区域包装器及复合交互模块等无语义场景，强行套用会破坏结构清晰度。
HTML5语义化标签不是万能的，强行套用反而会破坏结构清晰度。关键不在于“能不能用”，而在于“该不该用”——语义标签的价值，在于准确表达内容意图，而非堆砌新标签。
哪些场景必须保留 div
div 的本质是“无语义容器”，这恰恰是它的不可替代性。当结构纯粹为样式或逻辑分组服务、不承载内容含义时，div 是最安全的选择。
- 纯布局容器：如 Grid 或 Flex 的 wrapper，内部无标题、无独立主题，仅用于对齐和间距控制
- 动态组件外壳：Vue/React 中封装的可复用卡片、弹窗、加载骨架屏，其语义由内部内容决定，外层无需强加 article 或 section
- ARIA 区域包装器：例如
<div role="region" aria-labelledby="search-label">，比硬套<section>更精准传达交互意图 - 轮播图、手风琴、标签页等复合交互模块：每个子项不是独立内容单元，而是状态切换的一部分，用 div + ARIA 属性比嵌套多个 section 更合理
section 和 article 容易误用的边界
两者都表示区块，但语义权重差异极大。混淆会导致 SEO 权重错配、RSS 聚合失败、读屏器朗读逻辑混乱。
- article 必须满足“可脱离当前页面独立存在”：博客正文、新闻稿、用户评论、论坛帖子——这些内容能被单独抓取、索引、转发或订阅
- section 是依附型主题分组：如“技术参数”“售后服务说明”“客户评价汇总”，它没有独立发布价值，标题（h2-h6）是强制语义要求
- 单张图片、一个按钮、一段纯装饰性文字，都不构成 section；强行包裹只会稀释真实内容的语义浓度
- 列表项（
<li>）内嵌 article 是常见做法；但若列表本身只是导航入口（如“热门文章”链接列表），则整个列表用 nav 更合适，而非包一层 section
兼容性与渐进增强的实际取舍
语义化不是理想主义实验，需面对真实环境。IE8 已退出主流，但部分政企内网、老旧终端仍可能运行 IE9 或定制内核，此时需务实处理。
立即学习“前端免费学习笔记（深入）”；
- 现代项目（支持 ES6+、CSS Grid/Flex）：直接使用
<main>、<nav>等，配合 Lighthouse 审计与屏幕阅读器测试即可 - 需兼容 IE9 的项目：语义标签可用，但需在 CSS 中统一声明
display: block（IE9 默认将新标签当行内元素处理） - 极简兼容需求（如嵌入式设备 Webview）：优先保障功能可用，用 class 名模拟语义（如
<div class="main-content">），再通过 ARIA 属性补充可访问性（role="main"） - 永远不要为兼容性放弃语义逻辑：即使降级为 div，也应通过
role和aria-*属性保持机器可解析性
标题层级与语义标签的协同陷阱
h1–h6 不是视觉样式开关，而是内容逻辑树的节点。语义标签一旦嵌套，标题层级必须同步对齐，否则结构断裂。
-
<article>内部应以 h2 起始（因父级页面已有 h1），避免出现 article > h1；否则搜索引擎会误判为两个顶级内容 -
<section>必须含标题（h2–h6），否则失去“主题分组”意义；若只是视觉分隔线，用<hr>或 CSS 更恰当 - 组件库中自带 h1 的卡片（如“欢迎卡片”）嵌入页面时，必须降级为 h2 或改用
aria-labelledby关联外部标题，防止多 h1 - 使用
<hgroup>已不推荐（W3C 已弃用），主副标题组合建议用 h1 + p 或 h1 + span，并辅以 aria-label 明确关系
