真正决定网页骨架的是语义化区块级标签：①<header>、②<nav>、③<main>（唯一）、④<article>（可独立分发）、⑤<section>（需有主题标题）、⑥<aside>、⑦<footer>；<div>和<span>无语义，不构成结构。

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

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

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

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

为什么 <div> 套 <div> 会让结构失效

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

更实际的问题是：CSS 重置、无障碍测试工具（如 axe）、甚至某些 SSR 框架的结构分析都会跳过这类纯 <div> 堆叠。

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

Wechat HTML Publisher

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

下载

• 替换方案：用 <header> + <nav> + <h1> 组合，哪怕样式完全不变
• 不要为了“兼容旧 IE”放弃语义——IE 支持这些标签（需 HTML5 shiv），真正问题在 JS 选择器或 CSS 重置漏掉新标签
• 检查方式：用浏览器开发者工具切换到“Accessibility”面板，看是否能自动识别出导航、主内容等角色

嵌套规则和常见错误嵌套

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

典型错误：

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

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

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

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

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