必须唯一且不能嵌套，因其是页面唯一核心内容锚点，须为body直接子元素；重复或嵌套会致屏幕阅读器跳过内容、seo降权。
直接说结论：HTML文档结构不是“怎么写好看”，而是“怎么让浏览器、开发者、屏幕阅读器都快速理解内容意图”。骨架搭错，后续所有优化——SEO、首屏速度、无障碍支持——全在沙上建塔。
为什么只能出现一次且不能嵌套在里
浏览器和辅助技术把 <main></main> 当作页面唯一核心内容锚点。重复或嵌套会破坏语义流，导致屏幕阅读器跳过关键内容，或搜索引擎降权整个页面。
-
<main></main>必须是的直接子元素，不能包在<section></section>或<div> 里 <li>一个页面有且仅有一个 <code><main></main>；多个独立文章页（如博客列表）应各自用<article></article>，而非多个<main></main> - 如果误写成
<section><main>...</main></section>，Chrome 开发者工具的 Accessibility 面板会标红警告“<main></main>not at top level” - 用
<article></article>：一篇博客、一条新闻、用户评论、独立产品卡片（能脱离当前页单独被链接或分享） - 用
<section></section>：“前端工具推荐”下并列几个工具介绍；“客户评价”区块里一组引用；但里面每个引用本身不是<article></article>，除非每条都带独立 URL 和元数据 - 没
<h2></h2>~<h6></h6>的<section></section>很可能多余——它必须有明确的主题标题，否则语义失效 - 用 Chrome DevTools → Elements 面板按
Ctrl+Shift+C定位深层节点，重点查连续<div> 套娃区域 <li>Flex/Grid 能直接替代 2–3 层包裹容器：三栏布局不用 <code><div class="row"><div class="col">...</div></div>，改用display: grid+grid-template-columns - 单个
<section></section>下子元素超 50 个时，滚动重排明显卡顿；动态列表用DocumentFragment批量插入，避免逐项触发重排 -
<nav></nav>必须包裹**导航链接**；logo、搜索框、语言切换按钮不属于它——这些应放在<header></header>内 -
<aside></aside>是与当前内容相关但可剥离的补充信息（如侧边引用、作者简介），纯广告位或无关推荐应改用<div role="complementary"> <li>多个导航？用多个 <code><nav></nav>并加aria-label区分，例如<nav aria-label="主导航"></nav>和<nav aria-label="页脚导航"></nav>
section 和 article 的边界在哪
<section></section> 是主题分组容器，<article></article> 是可独立分发的内容单元。混用会导致结构歧义，比如 RSS 抓取失败、Google 富媒体摘要不触发。
DOM 嵌套超过 4 层就该警惕
浏览器解析 DOM 是深度优先遍历，每多一层嵌套，不仅解析耗时增加，CSS 选择器匹配成本也指数上升。实测中，<div><div><div><p></p></div></div></div> 这类纯样式驱动嵌套，会让 .a .b .c p 匹配变慢 3 倍以上。
nav 和 aside 的常见误用场景
<nav></nav> 不是“顶部那条横条”，<aside></aside> 也不是“右边那块空白区域”。错误归类会让辅助设备误读导航意图，或让 SEO 认为侧边内容权重过高。
最容易被忽略的是：语义标签本身不带样式，但它的存在直接影响浏览器默认渲染逻辑、辅助技术行为、搜索引擎抓取路径。写完骨架后，别急着加 CSS——先用 Chrome 的 Lighthouse 跑一遍 Accessibility 审计，看有没有 “<main></main> missing” 或 “heading levels skipped” 这类提示，比调样式重要得多。
