真正决定网页骨架的是语义化区块级标签：①、②、③（唯一）、④（可独立分发）、⑤（需有主题标题）、⑥、⑦

哪些 HTML 标签真正决定网页骨架

不是所有标签都参与结构定义，只有语义化区块级标签才构成可被浏览器和辅助技术识别的“骨架”。<div> 和 <code><span></span> 不算——它们没语义，只是容器占位符。

真正起结构作用的是：<header></header>、<nav></nav>、<main></main>、<article></article>、<section></section>、<aside></aside>、<footer></footer>。这些标签告诉浏览器“这里是一段导航”“这里是主要内容”，也影响 SEO 和屏幕阅读器行为。

• 一个页面必须有且仅有一个 <main></main>，代表页面核心内容区域
• <article></article> 用于能独立分发的内容（如博客正文），可嵌套在 <main></main> 或 <section></section> 内
• <section></section> 是主题性分组，不是视觉分隔；用它前先问：“这个区块有没有明确的主题标题？”
• 避免把 <header></header> 当作“顶部样式盒子”滥用——它只应包含本页或本节的标题、logo、简介等元信息

为什么

套

会让结构失效

写 <div class="header"><div class="nav"><div class="logo">...</div></div></div> 看似能实现布局，但对结构毫无意义。浏览器无法从中提取任何语义，搜索引擎不认为这是导航，屏幕阅读器不会提示“这是导航区”。

更实际的问题是：CSS 重置、无障碍测试工具（如 axe）、甚至某些 SSR 框架的结构分析都会跳过这类纯 <div> 堆叠。 <ul> <li>替换方案：用 <code><header></header> + <nav></nav> + <h1></h1> 组合，哪怕样式完全不变

不要为了“兼容旧 IE”放弃语义——IE 支持这些标签（需 HTML5 shiv），真正问题在 JS 选择器或 CSS 重置漏掉新标签

检查方式：用浏览器开发者工具切换到“Accessibility”面板，看是否能自动识别出导航、主内容等角色

嵌套规则和常见错误嵌套

HTML5 明确限制了某些标签的合法父/子关系。错嵌套不会让页面“崩”，但会触发解析器静默修正，导致 DOM 结构和你写的不一致。

典型错误：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 把 <main></main> 放进 <article></article> 或 <section></section> ——<main></main> 必须是顶层区块，不能嵌套
• 在 <header></header> 外直接写 <h1></h1> ——<h1></h1> 应属于某个章节上下文，单独存在语义模糊
• 用 <section></section> 包裹单个 <p></p> 而无标题 ——缺少 <h2></h2>~<h6></h6> 的 <section></section> 是无效语义
• <nav></nav> 里塞搜索框、登录入口等非导航功能 ——这些该用 <form></form> 或 <aside></aside>，别硬塞进导航

用 Chrome DevTools 快速验证结构是否合理

不用装插件，Chrome 自带的“Elements”+“Accessibility”面板就能暴露大部分结构问题。

• 右键检查任意元素 → “Accessibility”标签页 → 查看 “Role” 是否为预期值（如 <nav></nav> 对应 navigation）
• 在 Elements 面板中，按 Ctrl+F 搜索 <main></main>，确认只出现一次且未被包裹
• 展开 ，观察层级是否呈现清晰的“区块→子区块”逻辑，而非扁平的 <div> 海洋 <li>如果看到“implicit role”或“no role”却期望有语义，说明标签用错了或缺少必要子元素（比如 <code><nav></nav> 里没 <ul></ul> 或 <a></a>）

结构不是写完就完的事。每次加新模块，都要重新问一句：这个内容在整页中扮演什么角色？有没有更贴切的语义标签可替代 <div>？</div>