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

喝水的长颈鹿
14 阅读4分钟

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

HTML 提供了 6 类专用语义标签。用对它们有两个客观好处：

  1. 降本增效：自带原生样式（如自动缩进、自动引语、自动上下标），少写冗余 CSS。
  2. 机器可读：自带规范的语义，对 SEO 和无障碍访问（a11y）友好。

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

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

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

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

实际开发中常常组合使用

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

<!-- cite 属性专供机器抓取，页面不可见 -->
<blockquote cite="https://example.com">
  <p>块级引用标签会自动缩进文本。</p>
</blockquote>

<p>日常沟通中，我常说：<q>代码如诗</q>。</p>

显示效果：

image-6.png

2. 缩写：<abbr> 标签

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

实战中一般配合 title 属性

<p>这个方案我看过了，<abbr title="Looks Good To Me">LGTM</abbr>，可以合并代码。</p>

显示效果：

image-7.png

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

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

常见错误：滥用物理地址

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

<address>
  <p>本文作者：张三</p>
  <p>邮件：<a href="mailto:admin@example.com">admin@example.com</a></p>
</address>

显示效果：

image-8.png

4. 上下标：<sup> 与 <sub>

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

核心定律：复制不乱码

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

<p>水的化学式是 H<sub>2</sub>O</p>
<p>勾股定理：<var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup></p>

显示效果：

image-9.png

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

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

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

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

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

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

显示效果：

image-10.png

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

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

正确做法：实用主义格式

<!-- 仅完整日期：YYYY-MM-DD -->
<p>文章发布于 <time datetime="2024-05-20">今年五月二十日</time>。</p>

<!-- 日期 + 带时区的时间 (T 分隔，+08:00 为北京时间) -->
<p>系统将在 <time datetime="2024-05-20T19:30+08:00">今晚 7 点半</time> 进行升级。</p>

显示效果：

image-11.png

总结

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

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

avatar
文章
阅读
粉丝