Html 正确使用h3，因为它'；这是一个敏感的标签

假设我有以下场景：

<h3 className="service-card__body__title">
    <Icon name={service.icon} size="xl" />
    <span>{service.title}</span>
</h3>

{service.title}

这不是更好吗

<span className="service-card__body__title">
  <Icon name={service.icon} size="lg" />
  <span>{service.title}</span>
</span>

{service.title}

或

{service.title}

因此，

h

标记是一个敏感标记。目前，设计可能不会受到影响，但如果我们向设计中添加其他元素，它可能会受到影响，因为您不能将所有内容都放在

h

标记中

---

它是一个副标题吗？然后使用h3。如果您觉得需要添加h3中不允许的元素，那么它可能不是标题的一部分（因此您没有标题，或者其他元素应该出现在标题后面）

（你也不可能在一个音域内播放所有内容）

不要忘记以下警告：

注意。CSS赋予“class”属性很大的权力，因此作者可以根据几乎没有关联表示的元素（如HTML中的DIV和SPAN）设计自己的“文档语言”，并通过“class”属性分配样式信息。作者应该避免这种做法，因为文档语言的结构元素通常具有公认的含义，而作者定义的类可能没有

---

是副标题吗？然后使用h3。如果您觉得需要添加h3中不允许的元素，那么它可能不是标题的一部分（因此您没有标题，或者其他元素应该出现在标题后面）

（你也不可能在一个音域内播放所有内容）

不要忘记以下警告：

注意。CSS赋予“class”属性很大的权力，因此作者可以根据几乎没有关联表示的元素（如HTML中的DIV和SPAN）设计自己的“文档语言”，并通过“class”属性分配样式信息。作者应该避免这种做法，因为文档语言的结构元素通常具有公认的含义，而作者定义的类可能没有

如果它是一个标题（或者实际上是一个较低级别的标题-第三级别），并且（就像在您的示例中）它只包含作为标题一部分的内联元素，那么在第一个示例中使用它的方式是正确的

屏幕阅读器、辅助技术和搜索引擎将知道这是一个第三级标题，如果它是一个标题（或者实际上是一个较低级别的标题-第三级），并且（就像在您的示例中）它只包含作为标题一部分的内联元素，当您使用样式化的

span

时，他们将不知道这一点，在第一个示例中使用它的方式是正确的

屏幕阅读器、辅助技术和搜索引擎会知道这是第三级标题，当你使用样式化的

span

<div className="service-card__body__title">
      <Icon name={service.icon} size="lg" />
      <span>{service.title}</span>
</div>