Is it OK to use <div> inside <code>? - html

Question

Is it OK to use "div" tag inside "code" tag? I am using NetBeans 8.0.1 for writing some html pages. And at some point I had to use "div" inside "code". You can see a part of my code in http://jsfiddle.net/125ypcum/
NetBeans gives me the following error
Element "div" not allowed as child of element "code" in this context.
The result is what I want however the error troubles me. Is it a problem in anyway? Is there a way to get the same result without an error?
The code from jsfiddle:
<div class="codeDiv">
<pre>
<code class="black">stat<sub>0</sub>;
<div class="back-red codeBoxMargin">if (expr<sub>1</sub>)
<div class="back-green codeBoxMargin"> if (expr<sub>2</sub>)
{
stat<sub>1</sub>;
stat<sub>2</sub>;
}
else
<div class="back-blue codeBoxMargin"> if (expr<sub>3</sub>)
{
stat<sub>4</sub>;
stat<sub>5</sub>;
}
else
stat<sub>6</sub>;
</div></div>else
stat<sub>7</sub>;
</div>stat<sub>8</sub>;</code></pre>
</div>

Answer 1

code is an inline element, while div is a block element. Block elements must not appear inside inline elements.
If you want to have a div inside a preformatted container, use pre. Note, however, that pre by default shows line-breaks as-is. Or use a span element inside code (as proposed by Lowe Bäckström in a comment).

Answer 2

If you want to mark up your code with the code element, but you want a particular presentation style, use elements like div to set the arrangement of the elements, and then <code> to mark up the code itself. For your html, this would be:
<div class="codeDiv black">
<code>stat<sub>0</sub>;
</code>
<div class="back-red codeBoxMargin">
<code>if (expr<sub>1</sub>)
</code>
<div class="back-green codeBoxMargin">
<code> if (expr<sub>2</sub>)
{
stat<sub>1</sub>;
stat<sub>2</sub>;
}
else
</code>
<div class="back-blue codeBoxMargin">
<code> if (expr<sub>3</sub>)
{
stat<sub>4</sub>;
stat<sub>5</sub>;
}
else
stat<sub>6</sub>;
</code></div></div><code>else
stat<sub>7</sub>;
</code>
</div><code>stat<sub>8</sub>;</code>
</div>
NB: I have removed the <pre> tags!
You can then set the whitespace to be preserved using the css declaration code { white-space: pre; } and set your font to an appropriate monospace font.
code {
white-space: pre;
font: 1em/1.5 Menlo, Consolas, 'DejaVu Sans Mono', Monaco, monospace; /* or whatever */
}
Here's the JSFiddle.
<code> is an inline element meant for marking up spans of text within block-level elements like <div>, <p>, and so on. While most browsers will happily render your original html, it would be syntactically incorrect.