How to add plain text code in a webpage? [duplicate]

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

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 3

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