How to Display HTML Tags as Text

How to display HTML tags as plain text

Replace < with < and > with >.

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 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 tags as text

You must use use the escaped version. For example < becomes < (no quotes) and & becomes &.

You should be able to find a full list of transformations.

An example snippet:

<a href="http://google.com">Google</a>

is the escaped version of:

<a href="http://google.com">Google</a>

Edit:

The standard's list of entities: http://www.w3.org/TR/html4/sgml/entities.html

A Wikipedia artcile on it: http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

Showing html code as text in html webpage

With CDATASection.
The CDATASection object represents a CDATA section in a document.

A CDATA section contains text that will NOT be parsed by a parser. Tags inside a CDATA section will NOT be treated as markup and entities will not be expanded.

You can use it in XML for sample :

<![CDATA[<tag>Some text</tag>]]>

It Will interpreted such as :

<tag>some text</tag>

Or in program Output. Sample with CSS :

<style type="text/css">
/*<![CDATA[*/
body { background:black;  }     
/*]]>*/
</style>

Hope this help you.

Is there a HTML/CSS way to display HTML tags without parsing?

You can use a script element with its type set to denote plain text, and set its display property to block. This only affects the parsing behavior: no markup (tags or entity or character references) is recognized, except for the end tag of the element itself </script>. (So it is not quite the same as xmp, where the recognized tag is </xmp>.) You can separately make white space handling similar to that of xmp and pre and/or set the font the monospace as in those elements by default.

Example:

<style>
    script {
        display: block;
    }
</style>

Then within document body:

<script type="text/plain">
    <i>é</i>
</script>

Tested on newest versions of IE, Chrome, Firefox, Opera. Didn’t work in IE 8 and IE 7 emulation on IE 9, but that’s probably a bug in the emulation.

However, I don’t see why you would use this instead of xmp, which hasn’t stopped working. It’s not in the specs, but if you are worried about that, you should have always been worried. Mentioned in HTML 2.0 (the first HTML spec ever) as avoidable, it was deprecated in HTML 3.2 and completely removed in HTML 4.0 (long ago: in 1997).

The xmp is making a comeback rather than dying. The W3C HTML5 (characterized as the current HTML specification by W3C staff) declares xmp as obsolete and non-conforming, but it also imposes a requirement on browsers: “User agents must treat xmp elements in a manner equivalent to pre elements in terms of semantics and for purposes of rendering. (The parser has special behavior for this element though.)” The old parsing behavior is thus not explicitly required, but clearly implied.

try to show html tags as text with innerHTML

You need to use HTML entities to escape the < and > in those tags.

For example: "<span style='color:green'><h1>i am green</h1></span>"

See the fiddle: https://jsfiddle.net/ytLftxww/1/

Rendering HTML Tags from Server

Just use the syntax <%- your value %>

for example:

your_value = <p style="text-align=center;">Hello,World</p>

if you render the value like this:

<%= your_value %>

You will get the output as text. But if you render it like this:

<%- your_value %>

you will get only "Hello,World".