I wants to show my html code in my web page as normal text. how to do it?

HTML & CSS
1

i wants to show my html code in my web page as normal text. how to do it?

2

You can do this by using codes for the characters that are used in html. For example the “greater than” > and “less than” > symbols that are used on tags will be written as < and >
So:

<p>A Paragraph.</p>

would be written:

&lt;p&gt;A Paragraph.&lt;/p&gt;

This may be a but tedious to do, but if you use php you can use that to convert a string to this code using htmlentities .

4

as said above you will need to use html entities for the ‘<’ and ‘>’.
this web tool, however, might help with some of the tedium :
http://www.freebits.co.uk/convert-html-code-to-text.html

1 Like
5

phani,

As @SamA74 and @dresden_phoenix have shown, it takes a little work to display HTML on a web page.

You can convert the “less-than” and “greater-than” symbols to HTML character entities with a common text editor or with the tool that dresden_phoenix linked to.

If you use the freebits tool, then delete the unnecessary break tags at the end of each line. Your text editor can do this in one swoop. Then surround the converted code with <pre> and </pre> tags. You can style the <pre> tags if you wish.

The HTML code used in the “working page” example.:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>test page</title>
</head>
<body>
<div class="outer">
    <p>Lorem Ipsum lives here.</p>
</div>
</body>
</html>

Copy the following “working page” to a file and open it in your browser.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/i-wants-to-show-my-html-code-in-my-web-page-as-normal-text-how-to-do-it/223244
phani
May 6,2016 8:13 AM
-->
    <style type="text/css">
pre {
    font-weight:bold;
    font-size:1.0625em;
    line-height:1.25;
    font-family:monospace;  /* the default */
}
    </style>
</head>
<body>

<p>Freebit's coversion</p>

&lt;!doctype html&gt;<br />
&lt;html&gt;<br />
&lt;head&gt;<br />
    &lt;meta charset="utf-8"&gt;<br />
    &lt;title&gt;test page&lt;/title&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;div class="outer"&gt;<br />
    &lt;p&gt;Lorem Ipsum lives here.&lt;/p&gt;<br />
&lt;/div&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;<br />

<p>Delete &lt;br /&gt; tags from above conversion (see HTML source) and add  &lt;pre&gt; tags.</p>

<pre>
&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;test page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="outer"&gt;
    &lt;p&gt;Lorem Ipsum lives here.&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

</body>
</html>

Hope this helps.

1 Like
6

The break tags are not needed in that situation but it has nothing to do with XHTML. If they were XHTML break tags they wouldn’t have the space before the slash that was only ever needed for Netscape 4.

Break tags for XHTML5 are written as <br/> and provided you don’t need to support IE8 (which doesn’t understand XHTML) you can quite reasonably use XHTML5 instead of HTML5 for web pages just by ensuring all tags are closed and by changing the MIME type.

1 Like
7

Thank you, felgall. I edited that line of text to exclude the reference to XHTML style break tags.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.