PHP小码农

Appearance

strong 与 b ​

<strong> 和 <b> 都可以使文本显示为粗体，但它们的语义完全不同。<strong> 表示内容在上下文中具有重要性（importance）、严重性（seriousness）或紧迫性（urgency）；而 <b> 仅仅表示出于实用目的需要引起注意的文本，不传达任何额外的重要性含义。

前置知识

阅读本节前，建议先了解：pre 预格式文本

基础概念 ​

HTML5 中，文本加粗有两个标签可选：<strong> 和 <b>。虽然它们的默认视觉效果相同（都是粗体），但语义上有本质区别。<strong> 是语义标签，告诉浏览器和辅助技术"这段内容很重要"；<b> 是视觉标签，只表示"出于某种原因这段文字需要加粗显示"。

区分两者的关键在于：是否传达了重要性。如果加粗是为了强调内容的重要性，使用 <strong>；如果加粗只是出于排版需要（如产品名称、关键词高亮等），使用 <b>。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>strong 与 b 示例</title>
</head>
<body>
  <h1>strong 与 b 的区别</h1>

  <!-- strong：表示重要内容 -->
  <p><strong>警告：</strong>请勿在潮湿环境下使用本设备。</p>

  <!-- b：仅视觉加粗，无额外语义 -->
  <p>本产品采用 <b>纳米级涂层技术</b>，提供卓越的防护效果。</p>
</body>
</html>

详细说明 ​

strong 的语义 ​

<strong> 表示内容的重要性。其重要性程度可以累积——嵌套的 <strong> 表示更高程度的重要性：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>strong 语义示例</title>
</head>
<body>
  <h1>重要通知</h1>

  <!-- 单层 strong：重要 -->
  <p><strong>系统将于今晚 22:00 进行维护。</strong></p>

  <!-- 嵌套 strong：极其重要 -->
  <p><strong><strong>紧急通知：</strong>数据库服务器出现故障，请立即排查。</strong></p>

  <!-- 在警告场景中的使用 -->
  <p><strong>注意：提交后不可撤销，请仔细检查所有信息。</strong></p>
</body>
</html>

b 的语义 ​

<b> 表示文本需要以粗体显示以区别于常规文本，但不传达重要性。典型使用场景包括：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>b 标签示例</title>
</head>
<body>
  <h1>b 标签的典型用法</h1>

  <!-- 产品名称 -->
  <p>本方案使用了 <b>React</b> 和 <b>TypeScript</b> 技术栈。</p>

  <!-- 文章摘要中的关键词 -->
  <p>本文讨论了 <b>机器学习</b> 在 <b>自然语言处理</b> 领域的应用。</p>

  <!-- 代码中的变量名（行内代码场景） -->
  <p>将 <b>count</b> 变量初始化为 0。</p>
</body>
</html>

strong 与 b 的对比 ​

特性<strong><b>
语义表示内容具有重要性、严重性或紧迫性仅表示需要视觉加粗
默认样式粗体粗体
可嵌套可以（重要性递增）无嵌套语义
无障碍影响屏幕阅读器会加重语气朗读屏幕阅读器按正常语气朗读
SEO 影响搜索引擎视为重要内容搜索引擎视为普通文本
推荐程度需要强调重要性时首选仅用于纯视觉加粗场景

何时使用 strong，何时使用 b ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>使用场景对比</title>
</head>
<body>
  <h1>使用场景判断</h1>

  <!-- 使用 strong 的场景 -->
  <p><strong>警告：</strong>此操作不可逆。</p>
  <p>实验结果表明，<strong>新算法的性能提升了 40%</strong>。</p>
  <p><strong>请在提交前确认以下信息无误。</strong></p>

  <hr>

  <!-- 使用 b 的场景 -->
  <p>在 <b>CSS Grid</b> 布局中，网格容器是基础。</p>
  <p>据 <b>李明</b> 报道，该项目进展顺利。</p>
  <p>本页面使用 <b>VitePress</b> 构建。</p>
</body>
</html>

实战示例 ​

表单验证提示 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表单验证提示</title>
</head>
<body>
  <h1>注册表单</h1>

  <form>
    <p><strong>必填项</strong>标记为 * 号。</p>

    <p>用户名：<input type="text"></p>
    <p>密码：<input type="password"></p>

    <p><strong>重要：</strong>密码长度至少为 8 个字符，且包含大小写字母和数字。</p>

    <p>邮箱：<input type="email"></p>

    <p>阅读并同意 <b>用户服务协议</b>：<input type="checkbox"></p>
  </form>
</body>
</html>

注意事项 ​

不要滥用 strong ​

html
<!-- 不推荐：过多使用 strong，失去了强调的意义 -->
<p><strong>今天</strong>天气<strong>很好</strong>，我去<strong>公园</strong>散步了。</p>

<!-- 正确：只在真正重要处使用 -->
<p>今天天气很好，我去了附近的公园散步，<strong>沿途看到很多花开得正艳</strong>。</p>

不要将 b 用于标题 ​

html
<!-- 错误：用 b 模拟标题 -->
<b>第一章</b> 引言

<!-- 正确：使用标题标签 -->
<h2>第一章</h2> 引言

最佳实践 ​

  1. 优先使用 strong：当内容确实具有重要性时，优先选择 <strong>
  2. b 用于无语义加粗：当加粗只是为了排版区分，不涉及重要性时使用 <b>
  3. 不要依赖视觉：即使通过 CSS 取消了粗体样式，<strong> 的语义仍然存在
  4. 合理嵌套 strong：嵌套 <strong> 可表示更高的重要性层级

下一节

继续学习：em 与 i

参考链接 ​