<main>必须唯一且不能嵌套，因其是页面唯一主内容容器，W3C明确禁止被<section><header><nav>等语义标签包裹；错误写法破坏语义，导致屏幕阅读器跳过导航、SEO降权。

语义化标签本身不拖慢页面，但用错标签或强行绑定样式会引发重排、可访问性断裂、SEO权重稀释——解耦不是为了“看起来高级”，而是让浏览器、爬虫、屏幕阅读器和开发者都能按预期工作。

为什么

里嵌套

会触发不必要的重排

浏览器对 main 和 section 无默认布局影响，但若你在 CSS 中写了 main section { display: grid; }，又在 JS 中动态增删 section 节点，就可能触发 layout thrashing：每次 DOM 变更都迫使浏览器重新计算整个 main 的盒模型。

• 真正安全的做法是只对明确的类名做布局声明，比如 .article-grid，而非依赖语义标签层级
• main 全局唯一，且不能被 article、aside 或 section 包裹——否则大纲树断裂，部分屏幕阅读器会跳过内容
• 如果必须动态插入区块，优先用 display: contents 包裹语义容器（如 <section class="js-dynamic">），让它不参与布局流

用

代替

时，CSS选择器怎么写才不踩坑

很多人写 nav ul li a 这类强耦合选择器，结果换页头结构（比如改成 ol 或去掉 ul）就全崩。语义标签不保证内部结构，只承诺语义边界。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 正确方式：给导航容器加类名，如 <nav class="site-nav">，然后只写 .site-nav 相关规则
• 避免用 nav > a，因为面包屑、分页链接也常被误塞进 nav，它们不该共享同一套样式逻辑
• 若需区分主导航与页脚导航，用 aria-label + 类名组合：<nav aria-label="主导航" class="nav-primary">

去掉所有CSS后页面还能读吗？这是语义化最硬的检验标准

关掉样式后满屏 div 堆叠，说明语义链已断——不是没写标签，而是标签没落到真实内容节点上。

立即学习“前端免费学习笔记（深入）”；

• article 必须自带标题（h2–h6），哪怕视觉上隐藏：h2 { position: absolute; width: 1px; height: 1px; }
• section 没标题？大概率该用 div；aside 里塞广告图？它本意是“与主内容相关但可脱离存在”的旁注，广告不属于此范畴
• 检查开发者工具的 Accessibility 面板：大纲树是否连贯？article 下有没有跳级标题？nav 是否被识别为“navigation”角色？

最容易被忽略的是：语义化不是一次性动作，而是在每次新增模块、复用组件、改版布局时都要重新校验的活——尤其当 header 出现在 article 内部、time 标签被漏掉、button 被写成 div onclick，这些细节不会报错，但会让整套解耦逻辑悄悄失效。