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

Question

Is there any way that I could display HTML tags without parsing? Tags like XMP worked before perfectly but now it\'s replaced with PRE that isn\'t

Answer 1

The modern way is to use textarea with (boolean) attribute readonly. You could use XMP, but that is deprecated, so it may eventually stop being supported.
example:

<textarea readonly='true'>
    <p>This is some text</p>
</textarea>

Answer 2

I personally think using the <code> </code> tags only works in Dream Weaver and the tag <xmp> </xmp> never stopped working unless you put in </xmp> it works fine. Using <textarea> </textarea> makes it so that others can edit your code on the website or the page so I recommend that the tag <xmp> </xmp> is still used and that that tag still lives on.

Answer 3

There isn't.

In theory you could use a CDATA block, but no browser supports that in text/html mode.

Use character references.

Answer 4

I suggest using the html iframe tag and put the text you like to display in the src attribute. you only have to url or base64 encode it first.

example (urlencoded):
<iframe src="data:text/plain,%22%3Chello%3E%22"></iframe>

example (base64):
<iframe src="data:text/plain;base64,IjxoZWxsbz4i"></iframe>

Result displayed as:
"<hello>"

Answer 5

Well, one way would be to use jQuery. the jQuery .text() method will encode special characters. And the original un-encoded text will remain if you view source.

<div id="text">
    <a href="">This is an anchor</a>
</div>

<script>
    var t = $('#text'); t.html(t.text());
</script>

Answer 6

If you want to be more complex, another way is to create a custom tag using jQuery. For this example, I used <noparse>.

$('noparse').each(function(){
    if($(this).attr('tagchecked') != 'true'){ //checks if already changed tag
        $(this).text($(this).html()).attr('tagchecked', 'true'); //makes the html into plaintext
    }
});

JSFiddle here