Question

Why is it that if I do:

<div> aaaaaaaa <b></div>
<div> bbbbbbbb </div>
<div> </b> ccccccccc </div>

…the content “bbbbbbbb” is in bold? Then why can’t I do the same with another tag such as <span> instead of <b>? Is the bold case just the browser trying to fix it or is it actually valid?

I am attemping to hide some text content that could span several <div> tags but only know where the text starts and ends. Could I use a tag such as <b> to do this (with css stylin)? Or is it a really bad idea?

Do you have any other suggestions?

Edit: I cannot easily change the HTML so validation is not useful. The HTML is user generated.

Answer 1

It isn’t allowed. It is just the browser trying to perform error recovery.

Elements must be arranged in a tree structure. Each element has a single parent element (root node excepted).

Given the above input, Chrome will generate this:

<div> aaaaaaaa <b></b></div><b>
<div> bbbbbbbb </div>
</b><div><b> </b> ccccccccc </div>

You should not depend on this type of error recovery. Always remember to validate.