Browser adds empty code tag

[FDSservi]

You can see my problem in this jsFiddle.I tried using\[code\]code\[/code\] tags to distinguish special content, but this quickly backfired on me (as you can see in the above link). When I use Firebug to look at the content, this:\[code\]<code> <p> Some line of code </p> <p> Another line of code </p></code>\[/code\]has turned into this:\[code\]<p> This is a sample paragraph with a code block: <code> </code></p><p> <code> Some line of code </code></p><code> <p> Another line of code </p></code>\[/code\]Now, this can be solved by changing \[code\]<code>\[/code\] to \[code\]<div class="code">\[/code\] (as seen in this jsFiddle), but why did the browser do this in the first place, and why did it do it only to the first section in each paragraph?Firefox, Opera, Chrome, Internet Explorer, Safari - all of them do this, but I'd really like to know why. Does it happen with \[code\]code\[/code\] only, or will it do this with other tags? And why would browsers move tags around like that?