Alternative solution:
<pre></pre>
Whenever we might need to display a block of text that contains characters such as the <> carets, then we can enclose the block within the <pre></pre> tag-pair. For instance, we might want to display an example of our mark-up language on-screen for people to see.
The <pre></pre> tag-pair tells the browser that the contents are raw data, which the browser should display as is.
With CSS, we can manipulate the style of the text inside the <pre></pre> tag-pair, so that the text will appear the same as or different from the rest of our page according to our design.
