文本内容标记

HTML 文本元素表达的是内容角色和语气。p 表示一个段落，em 表示强调，strong 表示重要性，code 表示代码片段，blockquote 表示引用。它们可能有默认样式，但样式不是选择元素的理由。

表达含义，而不是复制外观

<p>部署前请先<strong>备份数据</strong>。</p>
<p>命令是 <code>npm run build</code>。</p>
<blockquote cite="https://example.com/standard">
  <p>引用的原文放在独立的引用块中。</p>
</blockquote>

strong 与 em 可以嵌套，但含义不同：一个强调重要性，一个改变语气或重音。b 和 i 也不是简单的“错误标签”，它们适用于需要引起注意或具有不同语气但没有额外重要性的文本；决定前要先明确内容意图。code 表示代码，不能用它替代所有等宽字体文本。

换行也有边界。源码中的换行和多个空格通常会被合并为空白；需要表达段落时使用 p，需要表达强制换行时才使用 br。把大量 br 当成布局工具会让内容结构和视觉布局互相缠绕。

变化一个条件观察差异

把 strong 改成 b，当前浏览器的粗体可能不变，但重要性语义消失。把两个 p 之间的 br 改成第二个 p，屏幕阅读器和样式布局更容易分别处理段落。把命令包在 span 中再设置等宽字体，也不能自动表达“这是代码”。

运行实验

1. 用可访问性树观察 strong、em、code 和普通 span 的差异。
2. 在同一段文字中分别使用 p、br 和源码换行，比较 DOM 结构和视觉结果。
3. 只改变 CSS，不改变 HTML，确认视觉相同不代表语义相同。

常见错误

• 看到粗体就使用 strong，却没有重要性语义。
• 用 br 堆出段间距或多列布局。
• 用 code 表达所有等宽字体内容。
• 用 div 包住所有文字，再让 CSS 猜测文本结构。

练习

把一段部署说明标记成：普通说明、必须注意的风险、命令、外部引用和两个独立段落。要求 HTML 能单独说明每种内容的角色，再用 CSS 让它们视觉上统一。提交时指出哪一处不能只靠 CSS 表达。

继续阅读

下一篇把多个同类内容组织成有序、无序和描述列表：列表与描述列表。

查看本节答案