用<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>七个语义标签可覆盖95%常规页面结构；<section>需有标题且能独立概括内容，<article>须可独立分发，<main>全页唯一且不可嵌套，纯样式容器才用<div>。
直接说结论：用 <header>、<nav>、<main>、<article>、<section>、<aside>、<footer> 这七个标签，就能覆盖 95% 的常规页面结构需求；剩下的不是非得用 <div>，而是你还没想清楚语义边界。
什么时候该用 <section> 而不是 <div>
<section> 不是「视觉区块」的代名词，它是有明确语义边界的——必须能配上一个 <h2>～<h6> 标题，且该标题能准确概括其内部全部内容。比如产品介绍区、用户评价区、FAQ 区都天然适合 <section>；但一个纯用来控制 Flex 布局对齐的容器，就不该硬套 <section>。
- 常见错误：把轮播图外层、卡片网格容器、表单分组框全写成
<section>，结果生成一堆无意义的文档大纲节点 - 判断口诀：删掉这个标签后，页面大纲（浏览器开发者工具里的「Accessibility → Landmarks」或「Outline」视图）是否断裂？如果没影响，大概率不该用
- 兼容性注意：
<section>在 IE9+ 完全支持，但旧版屏幕阅读器对嵌套过深的<section>解析不稳定，建议最多嵌套两层
<article> 和 <section> 的核心区别在哪
<article> 是可独立分发、可复用的内容单元，比如一篇博客、一条新闻、一个用户评论；<section> 是页面内逻辑分组，依赖上下文存在。两者都能嵌套标题，但语义权重不同：搜索引擎和 RSS 阅读器会单独抓取 <article> 内容，而忽略 <section>。
- 典型误用：把「关于我们」板块写成
<article>——它不独立，不能脱离当前网站存在 - 正确场景：博客列表页中每个
<article>可以被单独分享到社交平台，或被聚合进 RSS feed - 性能提示：过度使用
<article>会让辅助技术反复播报「文章开始/结束」，干扰视障用户浏览节奏
为什么 <main> 不能嵌套，且全页只能有一个
<main> 表示页面唯一的核心内容区域，是无障碍访问的关键地标（landmark）。浏览器和屏幕阅读器靠它快速跳转到主体，如果嵌套或重复，等于告诉辅助工具「这里有两个主内容」，直接导致导航失效。
立即学习“前端免费学习笔记（深入）”；
- 常见错误：在
<article>或<section>内再包一层<main>；或者在 SPA 中每个路由组件都渲染一个<main> - 实操建议：SPA 应由根组件统一包裹
<main>，子组件只用<section>或<article>；服务端渲染页确保 HTML 中仅出现一次<main> - 验证方式：运行 Lighthouse 的「Accessibility」审计，若报
Document does not have a main landmark或Multiple main landmarks，立刻修正
哪些地方真的绕不开 <div>，但可以少用
不是所有容器都需要语义——纯样式隔离、JS 挂载点、CSS Grid/Flex 子项包装，这些仍是 <div> 的合法领地。关键在于：别让它承担语义职责。
- 安全用法：按钮组容器
<div class="btn-group">、React 组件根节点<div ref={containerRef}>、动画包裹层<div class="fade-enter-active"> - 危险信号：看到
<div class="header">或<div id="sidebar">就该警觉——这说明语义被降级到了 class 层 - 替代思路：用
<header>+role="banner"（冗余但兼容旧读屏器），或直接用<aside>替代<div id="sidebar">
真正难的不是记住标签名，而是每次写结构前多问一句：这个区块如果剥离样式和 JS，它在纯文本大纲里该叫什么名字？答案如果是「顶部区域」「右边那块」，就还没找到语义锚点。
