How to Show ≪Div≫ Tag Literally in ≪Code≫/≪Pre≫ Tag

How to show div tag literally in code/pre tag?

Unfortunately it doesn't work with HTML tags.

<code> means "This is code", <pre> means "White space in this markup is significant". Neither means "The content of this element should not be treated as HTML", so both work perfectly, even if they don't mean what you want them to mean.

Is there any way to show "<div>" inside of <pre> or <code> tag without actually interpreting it as HTML?

If you want to render a < character then use <, with > for > and & for &.

You can't (in modern HTML) write markup and have it be interpreted as text.

PRE tag in bootstrap not displaying all code

If you use < or > symbols, your browser may confuse it to HTML tags.

You should use < and/or > wherever you have these symbols like this.

for(int i=0; i < numbers.length; i++) //use "<"   

and

 while(numbers[i] > 0) //use ">"

More info here

How to display raw HTML code in PRE or something like it but without escaping it

You can use the xmp element, see What was the <XMP> tag used for?. It has been in HTML since the beginning and is supported by all browsers. Specifications frown upon it, but HTML5 CR still describes it and requires browsers to support it (though it also tells authors not to use it, but it cannot really prevent you).

Everything inside xmp is taken as such, no markup (tags or character references) is recognized there, except, for apparent reason, the end tag of the element itself, </xmp>.

Otherwise xmp is rendered like pre.

When using “real XHTML”, i.e. XHTML served with an XML media type (which is rare), the special parsing rules do not apply, so xmp is treated like pre. But in “real XHTML”, you can use a CDATA section, which implies similar parsing rules. It has no special formatting, so you would probably want to wrap it inside a pre element:

<pre><![CDATA[
This is a demo, tags like <p> will
appear literally.
]]></pre>

I don’t see how you could combine xmp and CDATA section to achieve so-called polyglot markup

How to display raw HTML code on an HTML page

is there a tag for don't render HTML until you hit the closing tag?

No, there is not. In HTML proper, there’s no way short of escaping some characters:

• & as &
• < as <

(Incidentally, there is no need to escape > but people often do it for reasons of symmetry.)

And of course you should surround the resulting, escaped HTML code within <pre><code>…</code></pre> to (a) preserve whitespace and line breaks, and (b) mark it up as a code element.

All other solutions, such as wrapping your code into a <textarea> or the (deprecated) <xmp> element, will break.¹

XHTML that is declared to the browser as XML (via the HTTP Content-Type header! — merely setting a DOCTYPE is not enough) could alternatively use a CDATA section:

<![CDATA[Your <code> here]]>

But this only works in XML, not in HTML, and even this isn’t a foolproof solution, since the code mustn’t contain the closing delimiter ]]>. So even in XML the simplest, most robust solution is via escaping.

¹ Case in point:

textarea {border: none; width: 100%;}

<textarea readonly="readonly">
  <p>Computer <textarea>says</textarea> <span>no.</span>
</textarea>

<xmp>
  Computer <xmp>says</xmp> <span>no.</span>
</xmp>