How to add plain text code in a webpage?

Question

I know it is possible because this website does it, but I tried researching how and just got a bunch of junk, so how do I add tags to a website paragraph without the browser interpreting it as code.

For example, if I have <p><div></div></p>, I want the div to display in the browser as text not have the browser interpret it as html. Is this complicated to do?

I have been writing tutorials for school, and it would be much easier if I could add the code directly to the webpage in text form instead of images, so students can copy and paste it.

Answer 1

Look at how this website itself achieves this:

<p>For example, if I have <code>&lt;p&gt;&lt;div&gt;&lt;/div&gt;&lt;/p&gt;</code>, I want the div to display in the browser as text not have the browser interpret it as html. Is this complicated to do?</p>

You need to replace the < and > with their HTML character entities.

Answer 2

There are many ways to use:

1. Replace < with <

   `<h1>This is heading </small></h1>`
   

2. Place the code inside </xmp><xmp> tags

   <xmp>
       <ul>
           <li>Coffee</li>
           <li>Tea</li>
       </ul>
   </xmp>
   

I do not recommend other ways because they do not work on all browsers like <plaintext> or <listing>.

Answer 3

You want to look into something called HTML Entities.

If you want the < character to appear on a website, for example, you can write this HTML code: <. These are the five basic HTML Entities and their source code equivalents:

< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

If you are using a programming language (such as PHP or ASP.NET), then there is probably a built-in command that will do the conversion for you (htmlspecialchars() and Server.HtmlEncode, respectively).

Answer 4

Use the tag <PRE> before a block of reformatted text and </PRE> after. The text between these tags is rendered as monospaced characters with line breaks and spaces at the same points as in the original file. This may be helpful for rendering poetry without adding a lot of HTML code. Try this:

Mary had a little lamb. 
    Its fleece was white as snow.
And everywhere that Mary went
    the lamb was sure to go.

Answer 5

To add plain text code in a webpage, HTML Character Escaping is needed on five characters:

< as &lt;
> as &gt;
& as &amp;
' as &apos;
" as &quot;

(OR)

<xmp> tag may also be used as an alternate, this tag disturbs the style and is obsolete.

<xmp>Code with HTML Tags like <div> etc. </xmp>

Answer 6

Use the html entity/special character of the tag, such as < (for less than)

&lt;p&gt; in html -> <p> in browser

You could also write <p> since there is no ambiguity about the opening tag.

Many languages have built in methods to convert HTML special characters such as php's htmlspecialchars

Answer 7

You need to escape the HTML tags, namely the less-than sign. Write it as < and it will appear as < on the HTML page.

Answer 8

Your html needs to not be in tags. If you use the <> tags you will have it converted into code not text, if I was to write <br> in the middle of a sentence
then it would do this You will need to Write the code in code so to speak, using the < > (< >) and then you get what you need.

Answer 9

I just discovered a much simpler solution at CSS-Tricks... Just have your outer-most wrapper be a 'pre' tag, followed by a 'code' tag, then inside the code tag put your code in paranthesis.

Answer 10

The simplest way to do it without having to reformat your text using entities is to use JQuery.

<div id="container"></div>

<script>
    $('#container').text("<div><h1>Hello!</h1><p>I like you.</p></div>");
</script>

If you then do alert($('#container').prop('innerHTML'));, you get <div><h1>Hello!</h1><p>I like you.</p></div>

How useful that technique is depends somewhat on where your material is coming from.

Answer 11

Use iframe and txt file: <iframe src="html.txt"></iframe>