语义化HTML是CSS、JS、浏览器调度和SEO协同优化的前提；main元素具备原生识别能力，支持快速定位、首屏优化与SEO，而div.main需额外匹配，延迟至少一个渲染周期。

语义化 HTML 本身不提速，但它是让 CSS、JS、浏览器调度和 SEO 真正协同的前提——没这层结构，所有优化都像在迷雾里调参数。

为什么

比 div.main 更容易做首屏优化

浏览器对

有原生识别能力：解析阶段就能标记“这是主内容区”，配合 fetchpriority="high" 或服务端 SSR hydration 跳过非关键区域，能减少主线程阻塞。而 div.main 需要 JS 或 CSS 类名匹配，晚至少一个渲染周期。

• 是唯一支持 document.querySelector('main') 原生快速定位的语义节点，CSS 关键样式内联时必须与它对齐，否则内联失效
• 搜索引擎和 Lighthouse 把
  、
  视为低优先级，会延迟渲染或跳过快照生成，降低首屏 LCP 压力
• 用 + 包裹在
  内时，媒体查询在 HTML 解析阶段就生效，避免等 CSSOM 构建完才加载图片

display: contents 什么时候该用、什么时候不该用

它让父元素不参与盒模型，但子元素语义保留——适合需要 Grid/Flex 布局又不想破坏语义层级的场景，比如把

当作纯语义容器，实际布局由子元素撑开。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 适用：用
  包裹标题+正文+时间，但想让标题和正文并排布局，可给 article 设 display: contents，再用 article > * 做 Grid
• 慎用：如果子元素依赖父元素的 stacking context（如 z-index、opacity），display: contents 会抹掉该上下文，导致遮挡异常
• 不能用于替换可访问性角色：比如把
  改成 display: contents 后，屏幕阅读器可能丢失导航意图信号

嵌套超过 4 层就该警惕性能拐点

DOM 节点数每增加 1000，V8 编译耗时平均上升 12ms；深度超 6 层时 layout shift 分数明显恶化。语义标签不是越多越好，而是越准越轻。

• 推荐结构：
  →
  →
  或
  ，中间不插 div.wrapper 类包裹层
• 和
  应直接挂载在 body 下，不要套在 div#layout 里——这会干扰辅助技术对“页面边界”的判断
• 用 section 必须带 h2–h6 标题，否则不如用 div；无主题的 section 只是多一层 DOM 开销

最容易被忽略的是：语义结构一旦定型，CSS 就不该再用标签选择器写布局规则。写 aside { float: right } 看似省事，实则把视觉逻辑硬编码进语义层，下次改版就得动 HTML——这不是协同，是耦合。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！