七个语义化标签可覆盖95%页面结构需求；剩余用div处多因语义边界不清。section需有明确主题和标题，article强调独立可复用，main必须全页唯一且不可嵌套，div仅用于纯样式、动态容器或无更贴切语义时。
直接说结论：<header>、<nav>、<main>、<section>、<article>、<aside>、<footer> 这七个标签，能覆盖 95% 的常规页面结构需求；剩下必须用 <div> 的地方，往往不是技术限制，而是语义边界没想清楚。
什么时候该换 <section> 而不是留着 <div>
<section> 不是视觉分组的万能套壳。它成立的前提是：这块内容有明确主题，且能配上一个 <h2>～<h6> 标题，删掉这个标题，别人就搞不清这段在讲什么。
- 适合换：产品功能介绍区（
<h2>“核心功能”）、用户评价汇总（<h2>“真实用户反馈”）、FAQ 列表（<h2>“常见问题”） - 不该换：轮播图外层容器、Flex 布局对齐用的 wrapper、纯加 margin-top 的空白分隔块
- 验证方法：打开浏览器开发者工具 → Accessibility 面板 → 查看 Landmarks 或 Outline 视图；如果换成
<section>后大纲里多出一堆无意义的“section”，说明语义过载
<article> 和 <section> 的关键区别在哪
<article> 表示可独立存在、可复用的内容单元，比如一篇博客、一条新闻、一个用户评论卡片；<section> 只是页面内逻辑区块，脱离当前上下文就没法单独理解。
-
<article>可被 RSS 抓取、被社交平台分享、被搜索引擎单独索引；<section>不会 - 侧边栏里的“热门文章推荐”，每条都该是
<article>，而不是包在一个<section>里再塞一堆<div> - 嵌套关系上：
<article>内部可以用<section>划分“背景”“方法”“结论”，但反过来不行——<section>里不能随便塞<article>，除非它真是一组独立内容
为什么 <main> 必须全页唯一且不可嵌套
<main> 是无障碍访问的关键地标（landmark），屏幕阅读器靠它一键跳转到主体内容。重复或嵌套等于告诉辅助工具“这里有两个主内容”，导航直接失效。
立即学习“前端免费学习笔记（深入）”；
- SPA 场景下，根组件统一包裹一个
<main>，路由子组件只用<section>或<article> - 服务端渲染页，确保 HTML 源码中只出现一次
<main>，且不在<header>、<footer>、<aside>内部 - Lighthouse 的 Accessibility 审计若报
Multiple main landmark或Document does not have a main landmark，就是硬伤
哪些情况还必须用 <div>
<div> 并非过时，而是回归本职：当删掉它，内容的角色和关系依然清晰可辨时，它才合理。
- 纯样式用途：控制 Flex/Grid 对齐、添加过渡动画的 wrapper、仅用于 CSS scoped 的隔离层
- JavaScript 驱动的动态容器：比如 Vue/React 中由状态决定是否渲染的临时包裹层
- 没有更贴切语义标签可用时——例如一段需要统一设置 opacity 的图文组合，既不是文章也不是章节，也无关导航或侧边栏
真正容易被忽略的是：语义化不是贴标签比赛，而是持续判断“这段内容对用户、搜索引擎、辅助工具意味着什么”。写完一版结构，别急着加样式，先打开 Accessibility 面板看看大纲是否自然。
