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