</div></div> auto closing create child not sibling

Question

I really like to use "short closing" for tags using ordinary <tag/> format but unfortunately using such method in Browser (i.e. chrome) cause quite unexpected behavior.

When in document I have:

<div/><div/> 

it's interpreted as

<div>
   <div></div>
<div>

no matter what DOCTYPE i use (XHTML) or HTML5 I just get this in a wrong way. I'm also using this "notation" for custom tags in namespace <widget:aSampleWidgetA/> <widget:aSampleWidgetB/> which also introduce this problem.

I don't want to use a full closing notation as its making a lot of visual mess in code. Is there some way to force Browser to parse those tags as proper XML?

Answer 1

There is a way to make browsers (except of IE8 and below) parse the markup as XML. You need to serve it with the proper XHTML content type application/xhtml+xml.

Doctype is irrelevant for parsing, it affects only rendering mode (Standards or Quirks). When served as text/html, all pages will be parsed by HTML rules (HTML5 rules for modern browsers), which effectively mean that end slash in the 'self-closing' syntax is just ignored, and the ability of the element to be 'self-closed' is actually hard-coded in the parser. Divs and custom tags don't have this ability.