HTML Engine Automatic Tag Expanding

Well this one had me stumped for a little while... I'm using the JQuery UI library for an ASP.NET (MVC) project. I was trying something quickly using FireBug I grabbed this piece of markup and pasted it into my .aspx page:

1. <p>  
2. lt span class="ui-icon ui-icon-info" / gt  
3. <strong>Hey!</strong> Sample  
4. </p>  

lt span class="ui-icon ui-icon-info" / gt
Hey! Sample

Easy i thought. I was expecting some CSS conflicts so it was no surprise that my aspx version didn't look the same as the example.html version. But for the life of me couldn't work out which attribute/element combinations were different. They looked identical, they actual CSS was identical.

After much hair pulling I discovered a mysterious closing span tag that wasn't present in my pasted code??? Seems most HTML rendering engines (IE, FF, Chrome) don't like to output inline closing tags for elements that should obviously have content e.g . Unfortunately for me, instead of converting:

1. <p> span /  ...</p>  

 span /  ...

to:

1. <p><span></span>...</p>  

...

they decide to "fill out" the element within its parent, such that:

1. <p><span>...</span></p>  

...

and hence destroyed the CSS rules :(

Examing the network request/response in Firebug reveals that the HTML that comes down from the server is in fact the same as the .aspx file.

Note to self: to blindly copy/paste example code even when it really should work :)

Edit: I use Syntax Highlighter to format my code, but again the HTML engines seems to insist on messing up my inline lt span / gt tags for this post, grrr....