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>

stackoverflow.com/questions/2820453/display-html-code-in-html — Muath
– Muath, Commented Apr 24, 2014 at 10:26
@clement put the code between <xmp> </xmp> tags. P.S. XMP is deprecated ;) — Milan and Friends
– Milan and Friends, Commented Apr 24, 2014 at 10:29
It you need to ask, are you qualified to write an HTML tutorial? — Jukka K. Korpela
– Jukka K. Korpela, Commented Apr 24, 2014 at 11:14

Francois Borgies · Accepted Answer · 2014-04-24 10:40:10Z

4

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 :

&lt;tag&gt;some text&lt;/tag&gt;

Or in program Output. Sample with CSS :

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

Hope this help you.

answered Apr 24, 2014 at 10:40

Francois Borgies

2,43833 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shayan Shafiq · Accepted Answer · 2021-01-08 04:27:57Z

4

Use HTML entities for it.

E.g.:

< for <
> for >

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

Example:

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

CSS for Example 2:

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

edited Jan 8, 2021 at 4:27

Shayan Shafiq

1,4775 gold badges21 silver badges25 bronze badges

answered Apr 24, 2014 at 10:35

Kunj

2,0262 gold badges23 silver badges34 bronze badges

Comments

Rukshan C · Accepted Answer · 2014-04-24 11:33:39Z

3

replace < by < and > by >

answered Apr 24, 2014 at 11:33

Rukshan C

434 bronze badges

Comments

AlainPre · Accepted Answer · 2019-03-14 16:21:55Z

2

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

edited Mar 14, 2019 at 16:21

answered Mar 14, 2019 at 15:14

AlainPre

5433 silver badges6 bronze badges

Comments

Boruto Uzumaki · Accepted Answer · 2020-09-19 11:49:02Z

0

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.

answered Sep 19, 2020 at 11:49

Boruto Uzumaki

8411 bronze badges

Collectives™ on Stack Overflow

Showing html code as text in html webpage

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related