日常开发中，如果所有的特殊排版（如引用、上下标、代码块）都用 `<div>` 或 `` 配合 CSS 去实现，视觉上没问题，但在搜索引擎抓取和屏幕阅读器解析时，只是一堆无法被理解的纯文本。

HTML 提供了 6 类专用语义标签。用对它们有两个客观好处：
1. **降本增效**：自带原生样式（如自动缩进、自动引语、自动上下标），少写冗余 CSS。
2. **机器可读**：自带规范的语义，对 SEO 和无障碍访问（a11y）友好。

以下是高频使用的 6 类文本语义标签总结。

## 1. 引用：区分块级与行内

用普通的 `margin` 或 `border` 模拟引用，机器无法识别引用的权威属性。

- `<blockquote>`：**块级大段引用**。浏览器默认自带左右缩进。
- `<q>`：**行内短句引用**。浏览器会自动为内容添加语言本地化引号。
- `<cite>`：**标明引用源**（如书名、文章名、作者）。默认显示斜体。

> **实际开发中常常组合使用**

```html
根据 <a href="https://example.com"><cite>文档</cite></a> 所述：


<blockquote cite="https://example.com">
 块级引用标签会自动缩进文本。
</blockquote>

日常沟通中，我常说：<q>代码如诗</q>。
```
**显示效果：**

![image-6.png](https://developer.qcloudimg.com/http-save/yehe-12096415/575ec2a367e0e85ce55b2adf8a9895fb.png)

## 2. 缩写：`<abbr>` 标签

当内容中出现带有门槛的缩写单词（如 API、LGTM、NASA）时，使用 `<abbr>` 标记。屏幕阅读器会朗读大写字母或全称，大部分浏览器鼠标悬停时会展示系统级的提示框（Tooltip）。

> **实战中一般配合 title 属性**

```html
这个方案我看过了，<abbr title="Looks Good To Me">LGTM</abbr>，可以合并代码。
```
**显示效果：**

![image-7.png](https://developer.qcloudimg.com/http-save/yehe-12096415/9dba899a0cee550ca7eb044adc639ad7.png)

## 3. 联系信息：`<address>` 标签

专门用于展示**当前文档或文章作者的联系信息**（通常放在文章末尾或网站页脚）。屏幕阅读器会主动提示这是联系信息。

> **常见错误：滥用物理地址**
> 
> 不要用 `<address>` 去包裹快递收货地址或无关的地理位置信息。它仅描述本文档的联络渠道。

```html
<address>
 本文作者：张三
 邮件：<a href="mailto:admin@example.com">admin@example.com</a>
</address>
```
**显示效果：**

![image-8.png](https://developer.qcloudimg.com/http-save/yehe-12096415/fe054ac59520735f8be4d81eb6481fc1.png)

## 4. 上下标：`` 与 ``

写化学公式（HO）、数学公式（x）时，使用 ``（上标）和 ``（下标）。

> **核心定律：复制不乱码**
> 
> 如果用 CSS（如 `transform: translateY`）把普通文字推到右上角，复制页面文本时可能会出现空格隔断（把 `x` 错乱复制成 `x 2`）。原生标签能保证纯文本环境下的字面语义完全一致。

```html
水的化学式是 H2O
勾股定理：<var>a</var>2 + <var>b</var>2 = <var>c</var>2
```
**显示效果：**

![image-9.png](https://developer.qcloudimg.com/http-save/yehe-12096415/32a4cc13806104937e8f7724db2c28be.png)

## 5. 计算机代码：专用分类标签

编写技术文档时，不要全都用 `<code>` 包裹。HTML 按照代码属性划定了 5 个专门的标签，它们默认自带等宽字体：

| 标签 | 作用 | 适用场景 |
| :--- | :--- | :--- |
| `<code>` | 单行代码或术语 | 提及 HTML 标签 `<div>` 或方法名 |
| `<pre>` | 保留空格和换行 | 展示多行的完整函数块 |
| `<var>` | 变量或数学占位符 | 数学公式 `x` 或代码变量 `userName` |
| `<kbd>` | 键盘输入/操作按钮 | 提示用户按下 Ctrl+C 复制 |
| `<samp>` | 程序输出结果 | 提示终端输出的File saved! |

> **正确做法：代码块嵌套组合**
> 多行代码块需要将被 `<code>` 包裹的代码放进 `<pre>` 内部，以抵消浏览器的空白符合并机制。

```html
保存文件请按 <kbd>Ctrl</kbd> + <kbd>S</kbd>。

<pre><code>const init = () => {
 console.log('系统初始化');
}</code></pre>
```

**显示效果：**

![image-10.png](https://developer.qcloudimg.com/http-save/yehe-12096415/e725b35225624e45877850d9ec3e0683.png)

## 6. 时间与日期：`<time>` 标签

纯文本格式的日期（如5 月 20 日）机器无法精准解析。`<time>` 标签配合 `datetime` 属性，能够向系统注入规范的标准时间。部分浏览器或阅读器支持直接将它识别为系统日历事件。

> **正确做法：实用主义格式**

```html

文章发布于 <time datetime="2024-05-20">今年五月二十日</time>。


系统将在 <time datetime="2024-05-20T19:30+08:00">今晚 7 点半</time> 进行升级。
```

**显示效果：**

![image-11.png](https://developer.qcloudimg.com/http-save/yehe-12096415/7914e94526fdc0a2af604946d07b6415.png)

> **总结**
> 写 HTML 标签时，先定**这段文字客观上属于什么性质**，然后再去用 CSS 决定它**该怎么渲染长什么样**。

> ➡️ **下期预告**
> 搞定了文章里的字词句，接下来就是前端最关键的一步——如何用这些有着各种语义的标签，搭出一个真正能容纳万物的网页骨架？不管多复杂的页面，其实都逃不开 5 个核心组件。下一章，我们进入零基础必学的《HTML网页结构搭建：从语义化标签到整站规划》。

日常开发中，如果所有的特殊排版（如引用、上下标、代码块）都用 <div> 或 配合 CSS 去实现，视觉上没问题，但在搜索引擎抓取和屏幕阅读器解析时，只是一堆无法被理解的纯文本。

【大白话前端 08】HTML 文本语义化：6 类非 div 标签的速查指南

前端

HTML语义化标签提升SEO与无障碍访问，包括引用、缩写、联系信息、上下标、计算机代码和时间日期6大类。正确使用<blockquote>、<abbr>、<address>、/、<code>/<pre>和<time>等标签，既减少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编辑器全新改版上线，欢迎大家体验!

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

社区新版编辑器体验调研

【大白话前端 08】HTML 文本语义化：6 类非 div 标签的速查指南-腾讯云开发者社区-腾讯云

【大白话前端 08】HTML 文本语义化：6 类非 div 标签的速查指南

【大白话前端 08】HTML 文本语义化：6 类非 div 标签的速查指南

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐