How to Display HTML Code (Entities) on a Web Page

How do I display HTML code (entities) on a web page?

encode your html entities:

< … <
> … >
& … &
" … "
(' … ' xml, not html. see comments)

you might also want to use

<pre><code>
here comes your preformatted and escaped <html>-code
</code></pre>

to have your code monospaced and preserve whitespaces

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/

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.1

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.


1 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 do I display HTML entities as text?

I think, you are about htmlentities() function in PHP

PHP manual about htmlentities()

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.



Related Topics



Leave a reply



Submit