Showing html code as text in html webpage

Question

I'm asking on how could we show html code on a tutorial html website, for example to show to user how to make a link?

<a href="#">text</a>

Answer 1

Use HTML entities for it.

E.g.:

• < for <
• > for >

<pre>, <code> or <xmp> can be used but have compatibility issue.

Example:

1. <a href="#">text</a>

2. <span class="code"><span class="lt">&lt;</span>a href="#"<span class="gt">&gt;</span>text<span class="lt">&lt;</span><span class="fs">/</span>a<span class="gt">&gt;</span></span>

CSS for Example 2:

.code {
    font-family:Courier;
    color:#DF42AA;
}
.lt, .gt, .fs{
    font-family:Courier;
    color:#032F82;
}

Answer 2

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.

Answer 3

replace < by < and > by >

Answer 4

An other way with CSS :

code::before { content:'<'; }
code::after { content:'>'; }

And then, your HTML code will be :

<code>a href="#"</code>text<code>/a</code>

From this website about CSS (but in french).

Answer 5

use

< for < and > for >

A shortcut is "if you use < for <,and don't use > for >, then your output will be same as using both < and &gt.