网页就像一本书。如果全篇文字一样大、不分段，人类找不到重点，机器也无法解析。

HTML 标签的本质，是给内容“下定义”。不是为了视觉上的“字号变大”或“文字加粗”，而是向机器（浏览器、搜索引擎爬虫、屏幕阅读器）声明这段文字的结构属性。这就是“语义化”。

> 💡 **核心定律**：永远不要为了改变样式去使用 HTML 标签。样式问题全部交给 CSS。

## 一、标题标签 h1-h6：网页的骨架

HTML 提供了 `<h1>` 到 `<h6>` 共 6 个级别的标题标签。数字越小，层级越高，语义权重越重。

机器通过这些标签提炼页面的大纲。如果不遵守层级规则，机器提取出的目录就会逻辑错乱。

### 1. 核心约束规则

- **唯一性**：`<h1>` 是页面的核心主题，一个页面只能有 1 个。
- **连续性**：标题必须逐级向下拆分，不能跳级。

> ⚠️ **常见错误**：跳级使用标题。
> 视觉上可能觉得 `<h2>` 字体太大，直接用 `<h4>` 代替。这会导致机器生成的目录中出现结构断层。

```html

<h1>苹果派食谱</h1>
<h4>食材准备</h4>


<h1>苹果派食谱</h1>
<h2>食材准备</h2>
```

> ⚠️ **常见错误**：为了字号变大，滥用 h1 标签。
> 给所有看起来像标题的文字都加 `<h1>`，会导致搜索引擎无法确认当前页面的唯一核心关键字。

## 二、段落标签 p 与换行标签 br

`<p>` 标签用于定义一个完整的文本段落。浏览器会自动在 `<p>` 之间处理间距（默认 margin）。
`<br>` 标签仅用于在**同一段落内**进行强制视觉换行，它不具备拆分文本结构的物理意义。

> ⚠️ **常见错误**：用 br 替代 p 进行分段。
> 连续使用多个 `<br>` 拉开间距，机器依然会将上下两行视为同一个段落的长句。

```html

今天天气很好<br><br>我去公园散步


<p>今天天气很好</p>
<p>我去公园散步</p>
```

## 三、遵守语义化规则的好处

遵守上述结构约束，直接决定了网页在非人类阅读器中的表现：

> 💡 **核心定律**：搜索引擎爬虫会优先提取 `<h1>` 和 `<h2>` 中的文本作为页面关键字进行索引。纯 `<span>` 写出的“大字号标题”在爬虫眼里只是普通正文。

> 💡 **核心定律**：屏幕阅读器会提取页面的全套标题生成快捷目录，供视障用户语音跳转。没有标题标签，视障用户只能被迫从页面的第一个字按顺序听到最后。

## 四、结构重构对比

一段无标签的纯文本，在机器眼中毫无主次。为其贴上正确的结构标签后，机器就能一目了然。

```html

Favorite body parts
The brain
Lovely shape and color. Also does thinkin' stuff.


<h1>Favorite body parts</h1>
<h2>The brain</h2>
<p>Lovely shape and color. Also does thinkin' stuff.</p>
```

## 五、总结与下一步

> 📝 **总结**：`h1-h6` 用于搭建网页的骨干大纲，`<p>` 负责划分内容的血肉区块。把“写给机器看”的结构与“仅供展示看”的样式彻底剥离开来，是前端编码的底层铁律。

既然结构和样式要严格分离，那当我们在一个段落里，想突出某几个极其重要的字时，该怎么办？

初学者的本能反应通常是“加粗”，也就是直接敲一个 `<b>` 标签。但这同样掉进了“用样式代替语义”的陷阱——眼睛看到字变黑了，但机器却毫无反应。

在下一篇《06.HTML文本强调标签》中，我们将继续深入段落内部，拆解 `<strong>`（语义强调）与 `<b>`（视觉加粗）在机器运行机制上的差别。

HTML 标签的本质，是给内容“下定义”。不是为了视觉上的“字号变大”或“文字加粗”，而是向机器（浏览器、搜索引擎爬虫、屏幕阅读器）声明这段文字的结构属性。这就是“语义化”。

【大白话前端 05】HTML标题与段落

前端

HTML语义化是网页优化的核心，正确使用h1-h6标题标签构建页面骨架，避免跳级或滥用。段落用p标签而非br，确保机器可解析内容结构。语义化标签帮助搜索引擎抓取关键词，提升SEO效果，同时增强无障碍访问体验。样式问题应完全交给CSS处理。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯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编辑器全新改版上线，欢迎大家体验!

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

社区新版编辑器体验调研

【大白话前端 05】HTML标题与段落-腾讯云开发者社区-腾讯云

【大白话前端 05】HTML标题与段落

【大白话前端 05】HTML标题与段落

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐