HTML页面布局基础是语义化结构：<header>、<main>、<aside>等不可用<div>替代，因浏览器和屏幕阅读器依赖其语义识别内容角色；<main>必须唯一且不嵌套，<aside>须与邻近内容相关，<footer>可嵌套使用，<div>仅用于无语义场景。

HTML 页面布局的实现基础不是某种 CSS 技术，而是语义化结构本身。没有合理的 HTML 骨架，再高级的 Flex 或 Grid 也只会让错乱的内容“整齐地错乱”。

---

为什么 <header> <main> <aside> 这些标签不能用 <div> 全部代替

浏览器和辅助技术（如屏幕阅读器）依赖语义化标签理解内容角色。用 <div class="header"> 替代 <header>，CSS 样式可能一样，但：

• 屏幕阅读器无法自动识别该区域是页眉，会跳过导航提示
• 搜索引擎对 <main> 内容赋予更高权重，而 <div class="main"> 无此语义
• <nav> 触发键盘 Tab 顺序优化，<div class="nav"> 不会自动获得导航流行为

常见错误现象：

• 页面在 VoiceOver 或 NVDA 中朗读顺序混乱
• Lighthouse 报告 “Missing landmark elements”（缺少地标元素）
• <main> 没有被声明为唯一主内容区（页面中出现多个 <main> 会触发 W3C 验证警告）

使用场景建议：

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

• 必须且只能有一个 <main>，且不应嵌套在 <article> 或 <section> 内
• <aside> 应与邻近 <article> 或 <section> 内容相关（比如博客侧边的同类文章推荐），而非放广告横幅
• <footer> 在 <body> 直接子级表示页面页脚；在 <article> 内部则表示该文章的结尾信息（如作者、发布时间）

---

<div> 不是布局失败时的“万能补丁”

很多人一写不好 Flex 布局，就退回用一堆 <div> + class="wrapper" class="inner" class="col-left" —— 这本质是把结构责任推给 CSS，反而加剧维护难度。

Wechat HTML Publisher

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

下载

关键区别在于：

• <div> 是无语义的通用容器，不传达任何内容意图
• <section> 表示一个主题性内容区块（需有标题 <h2> 等）
• <article> 表示可独立分发、复用的内容单元（如一篇博客、一条新闻）

容易踩的坑：

• 用 <div> 包裹整个三栏结构，却不拆分 <header> <main> <aside> → 后续想用 display: grid 控制 header 跨列时，缺乏语义锚点，只能靠 class 名硬匹配
• 在 <main> 外又套一层 <div class="container"> → 容器本应由 CSS 控制宽高/居中，不该污染语义层
• 所有响应式断点都靠 JS 动态加 class（如 is-mobile），而不是用 <picture>、<source media> 或语义化结构配合媒体查询

---

<body> 直接子元素的顺序决定默认文档流与可访问性流

现代布局常忽略这点：视觉上用 Flex/Gird 重排，但屏幕阅读器仍按 HTML 顺序读取。如果代码里 <aside> 写在 <main> 前面，即使 CSS 让它显示在右边，盲人用户仍会先听到侧边栏内容。

必须保证：

• <header> 是 <body> 的第一个子元素（除非有 skip-link）
• <main> 紧跟其后，且早于 <aside> 和 <footer>
• <footer> 是 <body> 最后一个块级子元素

性能影响：

• 浏览器解析 HTML 时，遇到 <script> 会阻塞后续 DOM 构建；若 <footer> 里塞了未 defer 的统计脚本，可能拖慢 <main> 内容渲染
• <main> 越早出现在源码中，搜索引擎越快提取核心文本，LCP（最大内容绘制）指标更优

---

真正难的不是怎么让三栏并排，而是想清楚：

• 哪部分是用户真正要找的“主内容”？
• 哪部分可以被独立缓存或预加载？
• 哪部分在小屏下应该被折叠、延后加载，而不是单纯隐藏？
  这些判断一旦出错，所有 CSS 布局技巧只是在加固一个错误的前提。