Is there a limit on nesting certain HTML tags?

Question

I'm asking this because I ran into the weirdest problem today. An apparently valid HTML document fails to render properly.

The markup contains lots of deeply nested <b> tags. Here's an example.

It appears that after ~10 levels, the browsers move the tags somewhere at the end. The HTML validator reports:

Line 82, Column 24: End tag b violates nesting rules.

Then I get a few errors about stray closing tags, which make sense if the first error does. But to me it doesn't. What nesting rules does it violate if it's correctly nested?

Answer 1

The answer is here in the HTML5 spec: http://www.w3.org/TR/2014/REC-html5-20141028/syntax.html#push-onto-the-list-of-active-formatting-elements

It says:

If there are already three elements in the list of active formatting elements after the last list marker, if any, or anywhere in the list if there are no list markers, that have the same tag name, namespace, and attributes as element, then remove the earliest such element from the list of active formatting elements. For these purposes, the attributes must be compared as they were when the elements were created by the parser; two elements have the same attributes if all their parsed attributes can be paired such that the two attributes in each pair have identical names, namespaces, and values (the order of the attributes does not matter).

So: if you have more than three nested "active formatting elements" (such as <b>, <i>, <u> etc.), the browser will remove them from a list that it uses during parsing, and all sorts of strange things can happen.

Answer 2

Having deeply nested <b> tags in itself shouldn't be a problem (except perhaps semantically The b element should be used as a last resort when no other element is more appropriate (See W3C B Element)) - for example, this demo shows quite deep nesting and it validates fine.

...(24 levels deep)
<b>
<b>
    Deep nesting
</b>
</b>
... (24 levels deep)

However, perhaps there is some limit - but much further than you guessed.

If I validate your document on the W3C validator, it complains about the closing tag on line 90. If I remove the contents of this tag (testing for a mis-match) it validates okay.

If I then separately validate the contents of the tag that I removed (hoping to narrow the mis-match further) this surprisingly validated also.

If I put the two back together, the validator fails, which suggests the W3C validator has a limit.

And as an interesting final discovery - if you switch it all to <span> elements (for example) it validates just fine - as per this conversion.