HTML标签的使用 - 标题和段落

news/2026/1/18 20:30:24/文章来源:https://www.cnblogs.com/michanwang/p/19499060

标题和段落

特点

h1 ～ h6一共6级
文字自动加粗 + 独占一行
h1最好每个页面使用一次，一般用于文章标题或logo
Logo使用h1标签的例子：京东首页

除了新闻类场景标题可做分级，其他场景也可使用，例如：小米商城首页的商品类目标题，商品名标题以及商品内容。
每个页面尽量不要超过3级 → 最优写法：h1主标题 → h2大板块 → h3子内容，足够清晰，不冗余。

语义化的好处

什么是语义化？

语义化 = 让HTML标签有「含义」，用正确的标签做正确的事。
比如：标题就用h1-h6，正文段落就用p，而不是所有内容都用<div></div>或<span></span>堆砌。
核心原则：标签的意义 > 标签的样式

1. 更清晰的代码结构，极大提升团队协作效率，降低沟通成本

实际开发中，一个项目都是多人协作的（比如你写结构，同事写样式，另一个同事写交互）。
如果所有人都遵循语义化规范，新人接手项目时，不用问任何人，看HTML标签就能看懂页面结构：

看到h1就知道是页面主标题；
看到h2就知道是板块标题；
看到p就知道是正文段落；

如果是非语义化的div堆砌，新人需要逐行看class名、看注释、甚至问原开发者，才能理解结构，沟通成本极高。

核心价值：大型项目的必备规范，没有语义化，多人协作就是灾难。

非语义化写法（反例，纯div堆砌标题/段落）

<div style="font-size:28px;font-weight:bold;">我的第一篇前端笔记</div>
<div style="font-size:20px;font-weight:bold;">一、HTML语义化</div>
<div>语义化是前端的基础规范，核心是让标签有含义。</div>
<div style="font-size:18px;font-weight:bold;">1.1 标题的语义化规则</div>
<div>h1标签一个页面只能用一次，尽量不超过3级标题。</div>
<div>标题是页面的核心层级，会独占一行且加粗显示。</div>

问题：你能快速区分「主标题、二级标题、正文」吗？只能靠样式判断，结构完全混乱。

语义化写法（正例，用h1-h3+p标签）

<h1>我的第一篇前端笔记</h1>
<h2>一、HTML语义化</h2>
<p>语义化是前端的基础规范，核心是让标签有含义。</p>
<h3>1.1 标题的语义化规则</h3>
<p>h1标签一个页面只能用一次，尽量不超过3级标题。</p>
<p>标题是页面的核心层级，会独占一行且加粗显示。</p>

2. 对搜索引擎做SEO时更友好

搜索引擎（百度、谷歌）的爬虫在爬取页面时，「看不懂CSS/JS的样式」，只认识HTML标签的「语义」。
爬虫会给有语义的标签分配「权重优先级」，用对标签，能让你的页面在搜索结果中排名更靠前，这就是SEO优化的核心基础。

为什么h1最好每个页面只使用一次？
→ 搜索引擎给h1的权重远高于h2-h6和所有普通标签，h1代表「整个页面的核心主题」，如果一个页面写多个h1，爬虫会分不清页面的核心内容，导致核心权重分散，SEO效果大打折扣。
为什么标题尽量不要超过3级（h1→h2→h3）？
→ 爬虫识别层级的效率有限，3级标题足以清晰表达「主标题→分板块→子内容」的逻辑，层级过多（h1→h2→h3→h4→h5）会让爬虫判定页面结构混乱，降低收录优先级。
核心对比：<h1>前端笔记</h1> VS <div class="title">前端笔记</div>
→ 前者：爬虫直接判定「这是页面核心标题，重点收录」；
→ 后者：爬虫只判定「这是一个普通div，无核心价值」；
哪怕两者样式完全一样，SEO权重天差地别！
段落的语义化：<p>正文内容</p> 比 <div>正文内容</div> 更易被爬虫判定为「核心文本内容」，收录更全面。

3. 更好的可访问性

可访问性 = 让所有人都能正常访问你的页面，包括：视障人士、听障人士、使用老旧设备/极简浏览器的用户。
这是语义化最有温度的一个好处

视障人士的「屏幕阅读器」适配：
国内超2000万视障用户，浏览网页时会使用「屏幕阅读器」（如NVDA、VoiceOver、读屏王），这个工具的工作逻辑是：读取HTML标签的语义，而不是读取样式。

语义化写法的效果：

当屏幕阅读器读到 <h1>我的前端笔记</h1> 时，会清晰朗读：一级标题，我的前端笔记；
读到 <h2>HTML语义化</h2> 时，朗读：二级标题，HTML语义化；
读到 <p>标题一共6级</p> 时，朗读：段落，标题一共6级。
→ 视障用户能通过朗读内容，清晰感知页面的结构和层级，正常阅读。

非语义化写法的效果：

如果用div堆砌，屏幕阅读器只会机械朗读：区块，我的前端笔记 → 区块，HTML语义化 → 区块，标题一共6级。
→ 视障用户完全分不清哪里是标题、哪里是正文，页面等同于「无法访问」。

4. 天然自带符合语义的默认样式，减少冗余CSS代码

h1~h6 自带默认样式：字体加粗 + display:block（独占一行） + 字号从h1到h6依次递减，不用写 font-weight:bold; display:block;；
p 段落标签自带默认样式：上下有默认外边距 + 独占一行，不用写 margin: 1em 0; 来区分段落间距；
对比：如果用div写标题，需要手动加font-weight:bold;display:block;，用div写段落需要手动加间距，代码会多出很多冗余的样式。

核心价值：少写无用CSS，开发效率更高，代码更简洁。