跨度标签内的 Html h1 标签

如何解决跨度标签内的 Html h1 标签

我有一项任务，需要在 Web 应用程序内的多个页面上添加一些 h1 标记。文本已经存在但包裹在其他标签中，我需要将其转换为 h1 标签。当我这样做时，我需要在页面上保持相同的设计，所以在设计上什么都不应该改变。我们需要 google bot 的 h1 标签。

让我在下面向您展示一个示例。目前我在一个页面上有：

<span class="container">
   <span class="icon"></span>
   <span class="page-title">
      <span class="title">Title</span>
   </span>
</span>

我需要在那里插入 h1。我在互联网上读到在 h1 中添加 span 不是一个好主意，因为我的第一个想法是用 span.title 和样式替换 h1那个 h1 以便看起来像那个 span。

整个块基本上是一个角度组件，仅用于此标题部分（您可以看到它在文本前还包含一个图标）。

对于这种特殊情况，我们必须处理 spans，但在其他情况下，还有 divs 或其他元素。

处理这种情况的最佳方法是什么？

解决方法

<span>s 不能包含<h1>s;

• <span> 是一个内联元素
• <h1> 是一个 块 元素
• 内联元素不能包含块元素

由于 <span> 是一个 inline element，它可能包含另一个 <span>。

但是，要创建干净的 DOM，为 Google Bot 使用 <h1>，您应该考虑将 DOM 更改为：

<div class="container">
   <span class="icon"></span>
   <div class="page-title">
      <h1 class="title">Title</h1>
   </div>
</div>

,

我不确定为什么所有标签都是跨度标签，并且强烈鼓励重构此代码，使其包含语义标签。虽然 Omiod 是正确的，该站点不会中断，但它也不会很容易访问。使用语义标签可以创建清晰的信息层次结构。

至少我会（如@gilbert-v 建议的那样）在标题范围内放置一个 h1 标签。更进一步，我建议如下：

<div class="container">
    <span class="icon"></span>
    <div class="page-title">
        <h1 class="title">Title</h1>
    </div>
</div>

使用 CSS 设置您需要的样式。

,

除了图标之外的所有元素都应该是 div。一般来说，我只使用跨度来包装文本内容。

<div class="container">
    <span class="icon"></span>
    <div class="page-title">
        <h1 class="title">Title</h1>
    </div>
</div>