早期写网页，前端只有一个容器标签可用：<div>。
结果就是页面里堆叠了几百个 <div>。人眼能通过 CSS 样式看出哪里是头部、哪里是侧边栏。但对于搜索引擎爬虫、或是视障者的屏幕阅读器来说，这只是一坨没有主次的文本碎片。机器根本不知道 <div> 这几个英文字母代表核心内容。
HTML5 引入 <header>、<main> 等语义化标签，本质不是为了给页面换个长相，而是给网页写一份'机器能看懂的结构说明书'。
当把核心代码放进 <main>，把底部备案信息扔进 <footer>，爬虫一进来就明确知道：'抓取有效信息直接去 <main> 里找，底部的东西可以直接跳过。'这就是语义化的底层价值。
本文不背概念，直接以一个常见的博客设计稿为例，看我们该如何用这套标签把内容塞进正确的'房间'里。
一、网页的 5 个固定组件
再复杂的网站（比如电商、博客），核心结构都逃不出这 5 个固定组件。就像一套房子的'客厅、卧室、厨房'，功能是定死的：
| 结构组件 | 对应标签 | 作用 | 页面出现次数（通常） |
|---|---|---|---|
| 头部 | <header> | 放网站 Logo、大标题、全局搜索框。 | 1 次（每个页面顶部都一样） |
| 导航 | <nav> | 放全局首要链接（首页、分类、关于我们）。 | 1 次（常紧挨着头部） |
| 主内容 | <main> | 页面独占的核心内容（文章正文、商品详情）。 | 仅 1 次（这是用户来页面的目的） |
| 侧边栏 | <aside> | 辅助内容（作者简介、相关推荐、广告）。 | 可多次（依附主内容存在） |
| 底部 | <footer> | 网站补充信息（版权声明、备案号、联系方式）。 | 1 次（每个页面底部都一样） |
拿到设计稿，第一步就是用这 5 个框，把图纸划分清楚。
二、HTML 标签实战映射（页面级）
我们先看'整个页面只有一份'的三个核心骨架标签。
1. <main>：一切为了核心内容
main 是页面的绝对主角。用户打开这篇网页为了看什么，什么就放在 <main> 里。
💡 核心定律：一个页面只能有 1 个
<main>且必须可见。绝对不能把它嵌套在<header>、<nav>或<footer>里面。
<!-- 错误：放了两个主角 --><main>文章摘要 1</main><>文章摘要 2今天的天气北京今天晴，气温 15-25℃...
