Displaying < on the page

HTML-CSS
1

Currently working on a technical documentation page about HTML using the MDN page as reference and there’s a bit where I need to display various XML codes like < and " ON the page. Only problem is I can’t find a way to write that in the code and have it actually be displayed on the page without it rendering a less-than or quote symbol.

Heres the HTML and CSS code I’m using on my page:

HTML

<div class="code-container">
      <pre>
        <code>
          &lt;
        </code>
      </pre>
    </div>

CSS

.code-container{
  max-width: 80%;
  background-color: #434546;
  margin: 25px 0 0 40px;
  min-height: 50px;
  border-radius: 5px;
  text-align: left;
  height: auto;
  vertical-align: middle;
}

pre code{
  font-family: monospace;
  font-size: 1.09rem;
}

Any help with this would be awesome.

2

Actually, your code is working. Try to move the ‘background-color’ property from the .code-container selector and you will see the < .
For more information on this topic read:

3

(post deleted by author)

4

My problem is that it is displaying < when I want it to display & l t; like on this page at MDN. I just realized that when I wrote & l t and &q o u t in the post above the browser rendered them as the symbols instead of text. Should’ve thought about that, sorry.

image
image957×344 9.13 KB