How to make html ignore code that is part of text?

Use the xmp tag. It is easier and quicker than using an HTML encoder. Example:

<h1>This is a heading.</h1>
<p>This is a pharagraph</p>
<xmp>
<h1>This is a heading.</h1>
<p>This is a pharagraph</p>
</xmp>

Some people might crucify me not escaping my code. But this worked for me.

CSS

.tag:before{
content: '<'
}
.tag:after{
content: '>'
}

HTML

<pre>
<span class="tag">tag</span>
</pre>

<!--Instead of having to escaping all the character-->
&lt;tag&gt; &lt;&#47;tag&gt;

<!--Kinda interested to see why this is bad. I understand that not escaping  code can be dangerous b/c of SQL injections and all sort of BS but why is this  not a viable option-->

To not escape any characters at all, you can use a textarea:

textarea {
  font-family: inherit;
  font-size: inherit;

  border: none;
  background-color: transparent;
  resize: none;
  outline: none;
}

<div>In order to show a bullet point in html use the li tags:</div>
<div>
  <textarea readonly><li>Hello</li></textarea>
</div>
<div>And this is what it will look like:</div>
<li>Hello</li>

Run the snippet and notice the <li> and </li> tags render verbatim rather than being converted to a bullet.

Now why do we need the CSS and the extra HTML tags and attributes?

The CSS removes all the styling from textarea since the textarea will typically include styling for borders, resize gripper, and will use "input" style fonts. The textarea tag needs the "readonly" attribute so users can't edit it. The extra div tag around the textarea makes the textarea insert more correctly into the document flow.

It has some extra steps and it changes the DOM considerably but if you really need to show text strictly without escaping any characters at all for whatever reason.

I guess you just want to display a piece of code so you can just use https://highlightjs.org/

1. include this in your web page:

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/default.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

then add the <pre><code> tags to wrap your escaped piece of code you can use https://www.freeformatter.com/html-escape.html

<pre>
  <code class="language-html">
     &lt;h1&gt;this is my HTML code&lt;/h1&gt;
  </code>
</pre> 

or for CSS code

<pre>
  <code class="language-css">
     input { caret-color: red;}
  </code>
</pre> 

doc here https://highlightjs.org/usage/