How to Display Raw HTML Code on an HTML Page

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>

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 html code without rendering on page?

Method 1

You can use <xmp> but it's deprecated as suggested by @Someone_who_likes_SE. So probably avoid using it.

Mozilla XMP Documentation states:

The HTML element renders text between the start and end tags without interpreting the HTML in between and using a monospaced font.

<html>
<body>
  <xmp>Note : Use <br> for Line Break.</xmp>
</body>
</html>

How to display html code in a html page in a formatted manner

The most vanilla way to do this and have HTML show up as actual content on your webpage is by wrapping you HTML markup you want to display inside of ' <pre> ' tags.

Then you would need to use HTML entities to show the special characters you need, an open bracket is

and a closing bracket is

You can also use a plug-in to help aid in making your code look nice, like for syntax highlighting and more. A pretty nice javascript plug-in can be found here http://prismjs.com/

display RAW HTML Code in code tags

I need to manually replace html tags with entities.

You don't need to do it manually, but you do need to do it before you send the HTML to the client.

The usual approaches for solving the problem are:

Use Find & Replace in an editor
Write your content in a different language (such as Markdown, the approach used on Stackoverflow), convert it to HTML and then insert it in to your template.

Is there a nice solution (maybe in JS) to disallow the exec of html in a <code> tag?

No.

Any such solution would have some pretty serious limitations.

If it ran client side, it couldn't stop the content of the element being parsed so:

It would have to deal with the results of the HTML being parsed to a DOM and then serialised back to HTML (which would normalise it).
It couldn't deal with HTML that wasn't allowed inside <code> such as <p>

If it ran server side it would either need a very specialised parser to figure out where the code element started and finished (and probably couldn't handle the case where the desired output was <code></code></code> at all) or would suffer the same limitations as the JS version.

HTML display raw text

Easiest way I know: use a <textarea>

textarea { white-space: nowrap; }

<textarea rows="8" cols="50" >[2016-06-24 16:06:00]|DEBUG|...., details='#<hashie::mash worker_address="http://xxx.amazonaws.com:8081" worker_id="0000000008" worker_task_id="776f31e01c530134025722000b27033c:gather_source_file_info_task_1466784360">'</textarea>

Display Raw HTML on the Web Page

innerHTML parses the content and tries to generate an HTML that can be rendered. innerHTML is generally used when you want to insert new elements in your DOM using Javascript. If you want to simply render your content as text, you should use innerText.

How to Display Raw HTML Code on an HTML Page