HTML格式化标签重在语义而非样式,如用和替代与,用<ins>/代替<u>/<s>,<pre><var>各司其职,确保可访问性与维护性。

HTML 中的格式化标签不是“结构”本身,而是语义化地修饰文本内容。真正决定页面结构的是 <p>、<div>、<section> 等容器类标签;格式化标签只负责告诉浏览器“这段文字有什么含义”,比如强调、代码、插入、删除等。
用 <strong> 和 <em> 替代 <b> 与 <i>
现代 HTML(HTML5)推荐用语义优先的标签:<strong> 表示内容重要性高,<em> 表示语气上的强调。而 <b> 和 <i> 仅保留视觉效果,不带语义——比如产品名、外文术语适合用 <i>,但别用来做标题加粗。
- 错误写法:
<b>警告:操作不可逆</b>—— 缺少语义,屏幕阅读器无法传达严重性 - 正确写法:
<strong>警告:操作不可逆</strong>—— 语义明确,兼容辅助技术 -
<em>嵌套在句子中自然表达重音,例如:你<strong>必须</strong>先保存,<em>然后</em>才能提交
避免滥用 <u> 和 <s>,优先用 <ins> 与 <del>
<u> 在 HTML5 中已不再是纯样式标签,它表示“非文本标注”(如拼写错误下划线、专有名词),默认行为可能被 CSS 重置;<s> 仅表示不再准确的内容,不是“删除稿”。真正表达编辑痕迹要用 <ins> 和 <del>。
- 显示修改记录时写:
<p>原价<del>¥199</del>,现价<ins>¥99</ins></p> - 不要用
<u>模拟链接样式——链接该用<a>,下划线由 CSS 控制 -
<ins>和<del>支持datetime属性,例如:<del datetime="2026-09-28">旧条款</del>
<code>、<pre> 和 <var> 的分工要清楚
这三者都和“计算机相关内容”有关,但用途完全不同:<code> 是行内代码片段,<pre> 保留空格与换行用于多行代码块,<var> 专门表示变量名或占位符。
立即学习“前端免费学习笔记(深入)”;
- 单个函数名写成:
<code>fetch()</code>,不是<pre>fetch()</pre> - 多行 JS 示例必须用
<pre><code>...</code></pre>组合,否则缩进丢失 - 文档中提到“把
<var>url</var> 传入 <code><code>fetch()</code>”才符合语义 - 注意:
<pre>默认不换行,长代码需配合 CSS 的white-space: pre-wrap
最容易被忽略的是语义和样式的混淆:很多人用 <b> 加粗标题、用 <u> 模拟链接、用 <pre> 包裹普通段落——这些都会削弱可访问性,也增加后期维护成本。格式化标签的核心价值不在“看起来像什么”,而在“它本来是什么”。



















