Are overlapping HTML formatting tags always a bad practice?

问题

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:

.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.

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".

回答1:

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

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

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  tag:

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.)

The specification goes on to close the  and  and re-open a new  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.

Also, elsewhere in the spec, 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.

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

来源：https://stackoverflow.com/questions/28840281/are-overlapping-html-formatting-tags-always-a-bad-practice

标签

html

css

nested