文本语义

4 min入门2026/9/12

h1-h6、p、strong、em、mark、time、address

1. 标题元素 h1-h6

HTML 提供六级标题，<h1> 最高，<h6> 最低，用于构建文档大纲。

核心规则：每个页面建议只有一个 <h1>；不要跳级；标题用于语义结构，不用于控制字号。

<h1>网站主标题</h1>
<h2>章节标题</h2>
<h3>小节标题</h3>

2. 段落与文本元素

2.1 强调元素

元素	语义	默认样式	使用场景
`<em>`	语气强调	斜体	语音阅读时加重
`<strong>`	重要性强调	粗体	标记重要内容
`<mark>`	相关性标记	黄色高亮	搜索结果高亮
`<b>`	吸引注意	粗体	关键词
`<i>`	不同语态	斜体	术语、外文
`<small>`	附属细则	小字	免责声明

<p><em>不要</em>在走廊奔跑</p>
<p><strong>警告：</strong>高压危险</p>
<p>搜索"<mark>HTML5</mark>"的结果</p>

2.2 术语与引用

<dfn>HTML</dfn>是超文本标记语言
<abbr title="HyperText Markup Language">HTML</abbr>
<blockquote cite="https://example.com"><p>引用文字</p></blockquote>
H<sub>2</sub>O E=mc<sup>2</sup>
<code>console.log()</code>
<kbd>Ctrl</kbd> + <kbd>C</kbd>

3. time 元素

<time datetime="2026-06-14">2026年6月14日</time>
<time datetime="2026-06-14T10:30:00+08:00">上午10:30</time>
<time datetime="PT2H30M">2小时30分钟</time>

类型	格式	示例
日期	YYYY-MM-DD	2026-06-14
日期时间	YYYY-MM-DDTHH:MM:SS	2026-06-14T10:30:00
持续时间	PnYnMnDTnHnMnS	PT2H30M

4. address 元素

<address>
  <a href="mailto:contact@example.com">contact@example.com</a><br />
  北京市朝阳区某某路123号
</address>

注意：<address> 用于联系信息，不是物理地址的通用容器；默认斜体显示。

5. 其他语义文本元素

<p>价格：<del datetime="2026-01-01">¥99</del> <ins>¥79</ins></p>
<p>用户 <bdi>إبراهيم</bdi> 发表了评论</p>
<p>第一行<br />第二行</p>
<p>超长单词<wbr />可以在<wbr />此处<wbr />断行</p>

标题元素

六级标题 <h1>...</h1> ~ <h6>...</h6>

<!-- 标题用于语义结构,不用于控制字号 -->
<h1>网站主标题</h1>
<h2>章节标题</h2>
<h3>小节标题</h3>
<h4>更小的子节标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落与换行

段落 <p>[内容]</p>

<!-- 段落自动添加上下边距 -->
<p>这是一个段落。</p>

换行 <br> | <wbr>

<!-- br 强制换行,wbr 建议换行点(长单词) -->
<p>第一行<br />第二行</p>
<p>超长单词<wbr />可以在<wbr />此处<wbr />断行</p>

强调元素

文本强调标签

元素	语义	默认样式	使用场景
`<em>`	语气强调	斜体	语音阅读时加重
`<strong>`	重要性强调	粗体	标记重要内容
`<mark>`	相关性标记	黄色高亮	搜索结果高亮
`<b>`	吸引注意	粗体	关键词、产品名
`<i>`	不同语态	斜体	术语、外文
`<small>`	附属细则	小字	免责声明

<!-- 强调标签综合 -->
<p><em>不要</em>在走廊奔跑</p>
<p><strong>警告:</strong>高压危险</p>
<p>搜索"<mark>HTML5</mark>"的结果</p>
<p>这是 <b>关键词</b>,这是 <i>术语</i>。</p>
<p><small>本活动最终解释权归本公司所有</small></p>

术语与引用

定义与缩写 <dfn>[术语]</dfn> | <abbr title="<全称>">[缩写]</abbr>

<dfn>HTML</dfn>是超文本标记语言
<abbr title="HyperText Markup Language">HTML</abbr>

引用 <blockquote cite="<URL>">[内容]</blockquote> | <q cite="<URL>">[内容]</q> | <cite>[作品名]</cite>

<!-- 块级引用 -->
<blockquote cite="https://example.com">
  <p>引用文字</p>
</blockquote>

<!-- 行内引用 -->
<p>他说:<q>你好</q></p>

<!-- 作品标题 -->
参考:<cite>JavaScript高级程序设计</cite>

上下标与代码

上下标 <sub>[下标]</sub> | <sup>[上标]</sup>

<!-- 数学公式与化学式 -->
H<sub>2</sub>O
E=mc<sup>2</sup>

代码与键盘 <code>[代码]</code> | <pre>[预格式化]</pre> | <kbd>[按键]</kbd> | <samp>[输出]</samp> | <var>[变量]</var>

<!-- 行内代码 -->
<code>console.log()</code>

<!-- 代码块 -->
<pre><code>function hello() {
  console.log('Hello');
}</code></pre>

<!-- 键盘按键 -->
按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制

<!-- 程序输出 -->
<samp>Compilation successful</samp>

<!-- 变量 -->
<var>x</var> = 10

修改记录

删除与插入 <del [datetime="<日期>"]>[内容]</del> | <ins [datetime="<日期>"]>[内容]</ins>

<!-- 价格变更 -->
<p>价格:<del datetime="2026-01-01">¥99</del> <ins>¥79</ins></p>

隔离与方向

双向隔离 <bdi>[文本]</bdi> | <bdo dir="ltr|rtl">[文本]</bdo>

<!-- bdi 隔离方向不明的文本(如用户名) -->
<p>用户 <bdi>إبراهيم</bdi> 发表了评论</p>

<!-- bdo 强制文本方向 -->
<bdo dir="rtl">这段文字从右到左显示</bdo>

时间元素

time 元素 <time datetime="<ISO日期>" [pubdate]>[显示文本]</time>

<!-- 日期 -->
<time datetime="2026-06-14">2026年6月14日</time>

<!-- 日期时间(带时区) -->
<time datetime="2026-06-14T10:30:00+08:00">上午10:30</time>

<!-- 持续时间 -->
<time datetime="PT2H30M">2小时30分钟</time>

<!-- 发布日期 -->
<time datetime="2026-06-14" pubdate>发布于 2026-06-14</time>

类型	格式	示例
日期	YYYY-MM-DD	2026-06-14
日期时间	YYYY-MM-DDThh:mm:ss	2026-06-14T10:30:00
带时区	YYYY-MM-DDThh:mm:ssTZD	2026-06-14T10:30:00+08:00
持续时间	PnYnMnDTnHnMnS	PT2H30M

联系信息

address 元素 <address>...[a|br|文本]...</address>

<!-- 用于文档作者/文章作者的联系信息 -->
<address>
  <a href="mailto:contact@example.com">contact@example.com</a><br />
  北京市朝阳区某某路123号
</address>

高亮与注音

ruby 注音 <ruby>[字]<rt>[拼音]</rt></ruby>

<!-- 中日韩文字注音 -->
<ruby>汉<rt>hàn</rt></ruby>字
<ruby>日本<rt>にほん</rt></ruby>

注音、bdi/bdo 双向文本与国际化排版的完整专项（含 rp 兜底写法、RTL 布局要点）见 410-HTML5InternationalizationTags。

rp 注音回退

<ruby>
  汉<rp>(</rp><rt>hàn</rt><rp>)</rp>
</ruby>

动手试试

入门版（必做）

写一篇 100 字左右的“自我介绍”，要求包含：一个 h1、两个 h2、三个段落；
在其中一句话上用 <strong> 强调关键信息，用 <em> 表达语气；
用 <time> 标注今天的日期，用 <address> 写你的联系邮箱。

进阶版（选做）

用 <del>/<ins> 写一条“原价 99 元，现价 79 元”的价格信息；
用 <blockquote> 引用一句你喜欢的名言并标注出处；
用 <abbr> 给一个缩写词补充全称，鼠标悬停查看效果。

核心知识点

一句话记住文本语义：标题建层级，strong 表重要，em 表语气，mark 做高亮；日期用 time，联系用 address，其它标签用到再查。

h1-h6 构建文档大纲，每页一个 h1，不跳级；
strong（重要）与 em（语气）有明确语义，优先于 b/i；
mark 高亮相关结果，small 表示附属细则；
time 用 datetime 提供机器可读时间，address 只放联系信息；
del/ins 表达修订，sub/sup 表达上下标，bdi/wbr 属于“用到再查”。

注意事项与改进建议

问题点	说明	改进方案
用标题控制字号	层级语义被破坏，大纲混乱	标题表达层级，字号交给 CSS
多个 `h1`	页面主标题不唯一	每页只保留一个 `h1`
滥用 `strong`	全文都是“重要”，读屏负担大	只强调真正重要的信息
`address` 放普通地址	语义错误，影响读屏理解	联系信息才用 `address`
手写日期字符串	机器无法解析	用 `<time datetime>` 包裹
用 `br` 模拟段落	破坏段落语义	换段用 `p`，只有强制换行才用 `br`

扩展学习

列表语义：html5/120-List 掌握 ul/ol/dl 的选择；
链接语义：html5/130-LinksAndAnchors 中链接文案与无障碍；
无障碍：html5/180-Accessibility 中读屏如何消费文本语义；
排版细节：css/490-TypographyAndGridSystem 控制文本的视觉呈现。

文本语义

1. 标题元素 h1-h6#

2. 段落与文本元素#

2.1 强调元素#

2.2 术语与引用#

3. time 元素#

4. address 元素#

5. 其他语义文本元素#

标题元素#

段落与换行#

强调元素#

术语与引用#

上下标与代码#

修改记录#

隔离与方向#

时间元素#

联系信息#

高亮与注音#

动手试试#

入门版（必做）#

进阶版（选做）#

核心知识点#

注意事项与改进建议#

扩展学习#