早期写网页,前端只有一个容器标签可用:<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℃...

