重叠 HTML 格式化标签总是不好的做法吗？

Question

假设我需要一个文本 粗体和 斜体部分 相互重叠，就像你看到这句话有.

现在，我知道正确的方法是将 CSS 和 HTML 完全分开，就像上面的例子一样，但这看起来有点矫枉过正。像这样将其写成 3 个跨度并为粗体和斜体添加单独的 class 意味着您的用户将需要下载比第二个示例中仅使用重叠的 b 和 i 标签更多的数据：

.bold{
  font-weight: bold;
  }

.italic{
  font-style: italic;
  }

<div>I want this text to have both <span class="bold">bold</span> <span class="bold italic">and</span> <span class="italic">italic</span></div>

<div>I want this text to have both <b>bold <i>and</b> italic</i></div>

结果完全相同，但第二个使用的消费者带宽略小（可能只有几个字节，但全部加起来）。我知道正确的方法仍然是第一个，但这是否总是正确的？ html 开发指南是 20 年前确定的，当时还没有带带宽上限的消费级移动互联网。

此外，正如 Martin 正确评论的那样，以这种方式拥有大量跨度也比只看到那些 B 和 I 标签并了解 "it's bold from here to here, and italic from there to there" 更难阅读。

Answer 1

组合 i 和 b 完全没问题，但是，您需要确保正确嵌套它们。

错误：

I want this text to have both <b>bold <i>and</b> italic</i>

对：（当然要看你想达到什么效果）

I want this text to have both <b>bold <i>and</i></b> <i>italic</i>

Answer 2

自 HTML5 起，处理这些 "overlapping tags" 的程序已标准化：https://html.spec.whatwg.org/multipage/syntax.html#adoption-agency-algorithm

解析时

<div>I want this text to have both <b>bold <i>and</b> italic</i></div>

当我们到达  标签时，我们会遇到以下步骤：

If formatting element [here, the element started with ] is not the current node [here, the  element], this is a parse error. (But do not abort these steps.)

在这种情况下，规范继续关闭  和  并重新打开一个新的 。因此，尽管您确实获得了 "parse error,"，但根据标准，此标记仍会执行您想要的操作。

那么为什么这可能是一种不好的做法？

我会尽量坚持 objective 事实。

此自动修复仅限于关闭最多 8 级格式标记（请参阅算法中的第 3 步）。因此，它不适合作为通用技术。

此外，在规范的其他地方，https://html.spec.whatwg.org/multipage/syntax.html#parse-error

... user agents, while parsing an HTML document, may abort the parser at the first parse error that they encounter for which they do not wish to apply the rules described in this specification.

浏览器供应商如果不想处理这种情况，可以随意停止解析器。

重叠 HTML 格式化标签总是不好的做法吗？

Are overlapping HTML formatting tags always a bad practice?

html

css

nested

那么为什么这可能是一种不好的做法？