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

Suppose I need to have a text with a bold and an italic part that overlap each other, like you see this sentence have.

假设我需要一个带有粗体和斜体的文本,它们相互重叠,就像你看到这句话一样。

Now, I know the proper way is to completely separate CSS and HTML as in the top example, but it just seems like overkill. Writing it out in 3 spans like that and adding a separate class for bold and italic means your user will need to download quite a bit more data than if you just use an overlapping b and i tag like in the second example:

现在,我知道正确的方法是完全分离CSS和HTML,如上例所示,但它似乎有点矫枉过正。像这样写出3个跨度并添加一个单独的粗体和斜体类意味着你的用户需要下载比你在第二个例子中使用重叠的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>

The result is exactly the same, but the second one has a marginally smaller consumer bandwidth use (probably only a few bytes, but that all adds up). I know the correct method is still the first one, but does that always hold true? The guidelines for html development were determined 20 years ago, when consumer-grade mobile internet with bandwidth caps was not yet a thing.

结果完全相同,但第二个使用的消费者带宽略小(可能只有几个字节,但都加起来)。我知道正确的方法仍然是第一个,但这总是适用吗? HTML开发的指导方针是在20年前确定的,当时具有带宽上限的消费级移动互联网尚未成为现实。

In addition, as Martin rightfully comments, having a large amount of spans in this manner is also trickier to read later on than just seeing those B and I tags and knowing "it's bold from here to here, and italic from there to there".

此外,正如马丁正确评论的那样,以这种方式进行大量跨度也比后来阅读更难,而不仅仅是看到那些B和I标签并且知道“从这里到这里是大胆的,从那里到那里是斜体”。

2 个解决方案

#1

Combining i and b is totally fine, however, you need to make sure to nest them correctly.

结合i和b是完全正常的,但是,你需要确保正确嵌套它们。

Wrong:

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

Right: (depending on what you want to achieve, of course)

右:(取决于你想要达到的目标,当然)

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

#2

As of HTML5, the procedure for dealing with these "overlapping tags" is standardized: https://html.spec.whatwg.org/multipage/syntax.html#adoption-agency-algorithm

从HTML5开始,处理这些“重叠标签”的程序是标准化的:https://html.spec.whatwg.org/multipage/syntax.html#adoption-agency-algorithm

When parsing

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

we'll encounter the following step when we get to the </b> tag:

当我们到达 标签时,我们会遇到以下步骤:

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

如果格式化元素[此处,以开头的元素]不是当前节点[此处,元素],则这是一个解析错误。 (但不要中止这些步骤。)

The specification goes on to close the <i> and <b> and re-open a new <i> in this case. So while you do get a "parse error," this markup will still do what you want, according to the standard.

在这种情况下,规范继续关闭和并重新打开一个新的。因此,当您确实得到“解析错误”时,根据标准,此标记仍将按您的要求执行。

So why might it be a bad practice?

I'll try to stick with objective facts.

我会尽力坚持客观事实。

This automatic fixup is limited to closing up to 8 levels of formatting tags (see step 3 in the algorithm). Because of that, it's not appropriate as a general technique.

此自动修复仅限于关闭最多8级格式化标记(请参阅算法中的步骤3)。因此,它不适合作为一般技术。

Also, elsewhere in the spec, https://html.spec.whatwg.org/multipage/syntax.html#parse-error

另外,在规范的其他地方,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文档时,可能会在遇到的第一个解析错误时中止解析器,因为它们不希望应用本规范中描述的规则。

Browser vendors are free to stop the parser if they don't want to deal with this situation.

如果浏览器供应商不想处理这种情况,他们可以*地停止解析器。