HTML/PHP - Wrong closing tag order

Question

Of course, this tag is NOT correct :

<b><i>Hi</b></i>

However, it still runs perfectly in modern browsers (at least in newest version of chrome).

What is the negative effect for this wrong order of code?

Also, look at this :

<table><tr><td>Hi</td></table></tr>

How will the browsers treat THIS code?

Answer 1

Modern browsers will try to assume what you are trying to do with your code. From my humble understanding about browsers this is what I noticed:

Every opening tag will have a closing tag. Every closing tag must have an opening tag, if not, then there's no need to have that closing tag. If a closing tag is missing, the browser will complete your code for you and add a closing tag (this is the tricky part).

Most likely the closing tag will be before opening a new section or new tags collection.

If your code is:

<table> 
  <tr> 
    <td> 
       Hi
    </td> 
  </table> 
</tr>

Then it will be interpreted as:

<table>//opening OK
  <tr>//opening OK
    <td>//opening OK
       Hi
    </td>//closing an opened tag - OK
  </table>//closing table, we still have <tr> opened, close <tr> first by adding </tr> before this tag /*now '<tr>' has been closed already and then </table> is closed*/     
</tr>//this closing tag doesn't have an opening, remove it. 

Syntax auto correction results in:

<table> 
  <tr> 
    <td> 
       Hi
    </td> 
  </tr>
</table> 

Some browsers, however, like IE7 will treat that differently. It won't know what your intention is and which element is the parent of another.

In the following example, assume we forgot to close tag <b>. Now, should <c> be a child of <b> or a sibling?

<a>
 <b> // doesn't have a closing
  <c>
  </c>
</a>

Firefox and Chrome treated <b> and <c> as sibling as I intended and displayed all items, but in IE7 it only displayed one item because it assumed <c> is a child of <b>.

Therefore I assumed that firefox and chrome closed <b> for me before the opening of <c> which was my intention.

While IE included everything after the opening of <b> as children of <b> itself making all the subsequent element fall under <b> and displayed only one list item.

Firefox and Chrome:

<a>
 <b>
 </b> // auto close here as expected
 <c>
 </c>
</a>

IE:

<a>
 <b>
  <c>
  </c>
 </b>//auto close, they closed <b> just before closing the parent <a> logical but somehow falsy!
</a>

Hope that helps, and I hope that my understanding is somehow accurate.

Answer 2

In general, the browser will try to understand what you meant.

The "negative effect" is unpredictability.