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 so cool. Take a look at this example:

//This used to NOT PARSE HTML even if you used standard < and >.
<XMP>
<a hred="http://example.com">Link</a>
</XMP>

//New PRE tag requires &lt; and &gt; as replacement for < and >.
<PRE>
&#60;a href="http://example.com"&#62;Link&#60;/A&#62;
</PRE>

What I'm looking for is equivalent of old XMP tag. New PRE tag will parse code.

Was there any specific use case you were looking for, or do you just want to avoid having to encode characters? — Moses
– Moses, Commented Jul 26, 2012 at 16:53
@Moses I just want to be able to freely use <pre> and/or <code> tags on my website without necessity to convert anything (like < to <). I'd like them to display HTML/CSS code without parsing. — Atadj
– Atadj, Commented Jul 26, 2012 at 17:01

Gaurav Paliwal · Accepted Answer · 2017-11-02 18:54:39Z

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>&eacute;</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.

But i am not able to append like that in jquery!! $("#htmltest").html("<script type='text/plain'>"+unescape(escape(testvar))+"</script>");

Adam Pine · Accepted Answer · 2016-09-20 14:56:18Z

7

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>

edited Sep 20, 2016 at 14:56

Adam Pine

3972 silver badges7 bronze badges

answered Jan 6, 2014 at 1:15

knomologs

731 silver badge3 bronze badges

2 Comments

Michael Yaworski Over a year ago

Please try to provide a specific example for his problem, or else this could easily be a comment on his post.

Heitor Over a year ago

This answer worked very fine for me, thanks!! I just recomment to set the textarea css display: none because there is absolutely no reason to display everything to users!

peterh · Accepted Answer · 2020-11-11 13:36:23Z

6

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.

edited Nov 11, 2020 at 13:36

peterh

1

answered Sep 16, 2012 at 9:50

Sean Cassiere

612 bronze badges

Comments

morissette · Accepted Answer · 2018-12-27 04:49:05Z

2

And then... a few years go by, I have the same problem while converting my blog from wordpress to a vuejs spa backed by lambda and dynamodb.

And the answer is; at least in my situation. Escape the entity.

< becomes &lt;

> becomes &gt;

etc. etc.

Hope this helps.

answered Dec 27, 2018 at 4:49

morissette

1,1092 gold badges8 silver badges29 bronze badges

1 Comment

GTS Joe Over a year ago

Great (and unconventional) answer! In my particular case, it was just what I needed. Thank you.

Quentin · Accepted Answer · 2012-07-26 16:42:57Z

1

There isn't.

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

Use character references.

answered Jul 26, 2012 at 16:42

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

Comments

tjhorner · Accepted Answer · 2014-05-01 02:42:14Z

1

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

edited May 1, 2014 at 2:42

answered Nov 14, 2013 at 0:55

tjhorner

3682 silver badges17 bronze badges

Comments

Peter Korinek TellusTalk · Accepted Answer · 2016-01-11 15:20:17Z

0

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>"

edited Jan 11, 2016 at 15:20

answered Jan 3, 2016 at 3:02

Peter Korinek TellusTalk

2571 gold badge4 silver badges10 bronze badges

Comments

Niet the Dark Absol · Accepted Answer · 2012-07-26 16:40:42Z

-1

Technically you could use <textarea>, but it would require that there be no </textarea> tag in the code you are trying to show. It'd just easier to escape the <.

answered Jul 26, 2012 at 16:40

Niet the Dark Absol

326k85 gold badges478 silver badges604 bronze badges

1 Comment

Jukka K. Korpela Over a year ago

The use of textarea does not switch off all HTML parsing: character and entity references are still parsed. E.g., <textarea>é</textarea> displays é whereas <xmp>é</xmp> displays é.

Erik Funkenbusch · Accepted Answer · 2012-07-26 16:49:07Z

-1

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>

answered Jul 26, 2012 at 16:49

Erik Funkenbusch

93.6k29 gold badges201 silver badges292 bronze badges

2 Comments

Quentin Over a year ago

That will show a serialisation of the DOM created from the HTML, not the original HTML. It will also show a flash of rendered content.

Erik Funkenbusch Over a year ago

@Quentin - True, though in most cases those would be the same. And there are ways around the flashing.

Collectives™ on Stack Overflow

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

9 Answers 9

3 Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

2 Comments

Linked

Related