构建高性能网页骨架：HTML文档结构分层设计思路-html教程-PHP中文网

<main>必须唯一且不能嵌套，因其是页面唯一核心内容锚点，须为body直接子元素；重复或嵌套会致屏幕阅读器跳过内容、SEO降权。

构建高性能网页骨架：html文档结构分层设计思路

直接说结论：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”

section 和 article 的边界在哪

<section></section> 是主题分组容器，<article></article> 是可独立分发的内容单元。混用会导致结构歧义，比如 RSS 抓取失败、Google 富媒体摘要不触发。

用 <article></article>：一篇博客、一条新闻、用户评论、独立产品卡片（能脱离当前页单独被链接或分享）
用 <section></section>：“前端工具推荐”下并列几个工具介绍；“客户评价”区块里一组引用；但里面每个引用本身不是 <article></article>，除非每条都带独立 URL 和元数据
没 <h2></h2>~<h6></h6> 的 <section></section> 很可能多余——它必须有明确的主题标题，否则语义失效

DOM 嵌套超过 4 层就该警惕

浏览器解析 DOM 是深度优先遍历，每多一层嵌套，不仅解析耗时增加，CSS 选择器匹配成本也指数上升。实测中，<div><div><div> <p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill6712" title="Wechat HTML Publisher">Wechat HTML Publisher</a> <p>直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </div></div></div> 这类纯样式驱动嵌套，会让 .a .b .c p 匹配变慢 3 倍以上。

用 Chrome DevTools → Elements 面板按 Ctrl+Shift+C 定位深层节点，重点查连续 <div> 套娃区域 <li>Flex/Grid 能直接替代 2–3 层包裹容器：三栏布局不用 <code><div class="row"><div class="col">.../div>，改用 display: grid + grid-template-columns
单个 <section></section> 下子元素超 50 个时，滚动重排明显卡顿；动态列表用 DocumentFragment 批量插入，避免逐项触发重排

nav 和 aside 的常见误用场景

<nav></nav> 不是“顶部那条横条”，<aside></aside> 也不是“右边那块空白区域”。错误归类会让辅助设备误读导航意图，或让 SEO 认为侧边内容权重过高。

<nav></nav> 必须包裹**导航链接**；logo、搜索框、语言切换按钮不属于它——这些应放在 <header></header> 内
<aside></aside> 是与当前内容相关但可剥离的补充信息（如侧边引用、作者简介），纯广告位或无关推荐应改用 <div role="complementary">
多个导航？用多个 <nav></nav> 并加 aria-label 区分，例如 <nav aria-label="主导航"> 和 <nav aria-label="页脚导航">

最容易被忽略的是：语义标签本身不带样式，但它的存在直接影响浏览器默认渲染逻辑、辅助技术行为、搜索引擎抓取路径。写完骨架后，别急着加 CSS——先用 Chrome 的 Lighthouse 跑一遍 Accessibility 审计，看有没有 “<main></main> missing” 或 “heading levels skipped” 这类提示，比调样式重要得多。