</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.

Answer 2

Apologies, I can't find great documentation on this but I suspect it is because a div is not a valid self closing tag. Looking at the XHTML DTD, empty tags are specifically marked as EMPTY, div is not, so Chrome instead behaves as if it is html5 where the closing tags are can be left off and takes a best guess as to where to close them.

Alternatively, if you don't like the look of html, perhaps you might prefer something like haml or jade templates.