早期写网页，前端只有一个容器标签可用：`<div>`。

结果就是页面里堆叠了几百个 `<div>`。人眼能通过 CSS 样式看出哪里是头部、哪里是侧边栏。但对于搜索引擎爬虫、或是视障者的屏幕阅读器来说，这只是一坨没有主次的文本碎片。机器根本不知道 `<div class="main">` 这几个英文字母代表核心内容。

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>` 里面。

```html

<main>文章摘要1</main>
<main>文章摘要2</main> 


<main>
  <h1>今天的天气</h1>
  <p>北京今天晴，气温15-25℃...</p>
</main>
```

### 2. `<header>`与`<footer>`：门面与收尾

`<header>` 放全局性的标识；`<footer>` 放全局的补充说明。它们通常在每个页面（首页、文章页、关于页）都保持相同的代码。

```html
<body>
  <header>
    <img src="" alt="我的博客logo">
    <h1>小A的技术博客</h1>
  </header>
  
  <main>
    
  </main>
  
  <footer>
    <p>©2025 小A的博客 | 备案号：京ICP备123456号</p>
  </footer>
</body>
```

---

## 三、文章与章节（内容级标签判断）

大框架搭好后，我们进入 `<main>` 的内部。这里是新手最容易犯迷糊的地方：到底什么时候用 `<article>`，什么时候用 `<section>`？

### 1. `<article>`：独立成册的“小黄书”

`<article>` 代表一段**完全独立**的内容。

> 📖 **独立性判断**
> 判断标准：**把这部分内容单独复制下来，发到另一个网站去，它还是一篇完整、能看懂的东西吗？** 如果能，就用 `<article>`。

一篇完整的博客文章、论坛里的一个主帖、一个商品介绍卡片，都属于 `<article>`。

```html
<main>
  
  <article>
    <h2>如何搭一个简单的HTML页面</h2>
    <p>第一步：创建.html文件...</p>
  </article>

  <article>
    <h2>CSS 基础入门</h2>
    <p>把网页变好看的秘密...</p>
  </article>
</main>
```

### 2. `<section>`：书里的“第 X 章”

`<section>` 代表具有相同主题的**内容分组**。它不是独立的文章，而是文章里的一个“章节”。

> 💡 **核心定律**：`<section>` 通常必须带有一个标题（`<h1>`-`<h6>`）。如果没有标题，说明这段内容不具备主题分组的资格，可能只是一个普通的 `<div>`。

```html
<article>
  <h2>HTML结构入门</h2>
  
  
  <section>
    <h3>1. 什么是HTML结构</h3>
    <p>就是网页的骨架...</p>
  </section>
  
  
  <section>
    <h3>2. 核心标签有哪些</h3>
    <p>有header、nav、main...</p>
  </section>
</article>
```

---

## 四、被滥用的 `<nav>` 与 `<aside>`

### 1. `<nav>`：只留给“主干道”

不要看到链接就加 `<nav>`。文章底部的“上一篇/下一篇”链接、正文里的外部参考链接，都不配用 `<nav>`。
`<nav>` 是站点的**主导航器**。

> 🛠️ **正确做法**：通常将 `<ul>` 列表放在 `<nav>` 中，确保语义极其清晰。

```html
<nav>
  <ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="about.html">关于我</a></li>
  </ul>
</nav>
```

### 2. `<aside>`：正文的跟班

`<aside>` 里面的内容如果被删掉，绝对不能影响主内容的阅读理解。
最经典的场景就是侧边栏的“作者简介”、“相关猜你喜欢”、“广告位”。

```html
<main>
  <article>
    
  </article>
  
  <aside>
    <h3>相关文章推荐</h3>
    <ul>
      <li><a href="#">上周去爬山</a></li>
    </ul>
  </aside>
</main>
```

---

## 五、无语义元素的归宿：`<div>` 和 `<span>`

如果你手上的内容，套不上前面说的任何一个“带名字的房间”，这时候才轮到万能的容器出场。
记住，**它们没有任何语义，在机器眼里就是透明容器，仅为了方便 CSS 挂载样式。**

*   **`<div>`（大箱子）**：独占一行。用于包裹无主题的块级内容（如一个用来做动画的遮罩层、一个复杂的购物车弹窗框）。
*   **`<span>`（小贴纸）**：不独占一行。用于包裹文字里的一小段，方便给这几个字单独上色。

```html
<p>
  今天气温<span class="high-temp">25℃</span>，比昨天高了。
</p>


<div class="banner-wrapper">
  <img src="">
</div>
```


> 🧠 **10秒速记指南**
> *   页面唯一主角定生死： `<main>`。
> *   能单独转发给别人的内容块：`<article>`。
> *   带小标题的内容区域/章节：`<section>`。
> *   为了加 CSS 样式而设置的透明大盒子：`<div>`。

> ➡️ **下期预告**
> 骨架搭好了，但网页还像一座座无法互通的信息孤岛。怎么让页面之间能够自由跳转、一键下载文件、甚至直接弹出邮件草稿？下一篇文章《HTML超链接从入门到精通》，带你掌握Web真正的灵魂——`<a>`标签！

结果就是页面里堆叠了几百个 <div>。人眼能通过 CSS 样式看出哪里是头部、哪里是侧边栏。但对于搜索引擎爬虫、或是视障者的屏幕阅读器来说，这只是一坨没有主次的文本碎片。机器根本不知道 <div class="main"> 这几个英文字母代表核心内容。

【白话前端 09】HTML网页结构搭建：从语义化标签到整站规划

前端

HTML5语义化标签提升网页可读性与SEO效果，通过<header>、<main>、<footer>等标签明确页面结构，<article>定义独立内容，<section>划分章节，<nav>标记主导航，<aside>放置辅助内容。合理使用语义化标签帮助搜索引擎快速抓取核心内容，提升网站可访问性与SEO排名。

容器

HTML5

2026新春采购季

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

【白话前端 09】HTML网页结构搭建：从语义化标签到整站规划-腾讯云开发者社区-腾讯云

【白话前端 09】HTML网页结构搭建：从语义化标签到整站规划

【白话前端 09】HTML网页结构搭建：从语义化标签到整站规划

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐