How to show HTML tags on website?

I am currently using the <xmp> tags but since those are deprecated what is the correct way?

Any links to your work, or an example of the code?

<xmp>
	<div class="grid-container">
		<div class="grid-item">1</div>
		<div class="grid-item">2</div>
	        <div class="grid-item">3</div>
		<div class="grid-item">4</div>
		<div class="grid-item">5</div>
		<div class="grid-item">6</div>
		<div class="grid-item">7</div>
		<div class="grid-item">8</div>
		<div class="grid-item">9</div>
	</div>
</xmp>

I tried using &lt; and &lg; but it didn’t work.

Well, the simple solution I think would be to use a markdown previewer, like they do here on freeCodeCamp. You can find one here: https://github.com/markedjs/marked but there are multiple options to choose from, and just needs a little JS knowledge

I was looking into something like that, but it seems severely overkill to use on the technical document project. This is the only piece of html code I am trying to display on the page, the rest of my code examples work fine with the <code> tags because there are no html tags in them.

ok I just found this as well https://www.w3schools.com/html/html_entities.asp
using &#60 and &#62 should work

1 Like

and yes definitely overkill on that project!

1 Like

The xmp tag is obsolete. There is a <code> tag but it is only semantic. Not sure why &lt; and &gt; wouldn’t work for you?

Anyhoo, I found this on github:

Looks promising

1 Like

Yes! that worked. I wonder why &lt; isn’t working? Everywhere I searched that was what kept coming up as the HTML entity.

I’m confused about this as well. &#60 and &#62 works but not &lt; and &lg; Maybe it’s just a chrome thing.

But also, why get rid of xmp? Look at my code now:

<code>
	&#60div class="grid-container"&#62
	     &#60div class="grid-item"&#62 1 &#60/div&#62
	     &#60div class="grid-item"&#62 2 &#60/div&#62
	     &#60div class="grid-item"&#62 3 &#60/div&#62
	     &#60div class="grid-item"&#62 4 &#60/div&#62
	     &#60div class="grid-item"&#62 5 &#60/div&#62
	     &#60div class="grid-item"&#62 6 &#60/div&#62
	     &#60div class="grid-item"&#62 7 &#60/div&#62
	     &#60div class="grid-item"&#62 8 &#60/div&#62
	     &#60div class="grid-item"&#62 9 &#60/div&#62
	&#60/div&#62
</code>

And if I don’t put the space between the content of my divs which is the numbers 1-9 in this example they show as odd symbols.

The entities should end with a semicolon. Since you don’t have a semicolon after &#62, if you put the number right after it the browser interprets it as a three digit entity number. Bottom line, add semicolons to the end of your entities.

You don’t want to use xmp because it is technically no longer a valid tag in HTML5. A lot of browsers might support it right now, but it will eventually die off completely.

If you want to be semantically correct, use code. As far as formatting your code, use a JS library to help you do that. Or you could use the pre tag which will preserve the whitespace and returns.

2 Likes

Ok Found it! use the <pre> tag instead of <code>, then you can use the &gt and &lt. also fixes the space issue that you mentioned since you aren’t using an ID number for the symbols

1 Like

Thanks guys, the semi-colons fixed my spacing issue using the code tags, and the &ltg; works with <pre> but not with <code>. Got it! That’s pretty clumsy but such is web dev I guess.

&lt; and &gt; should work with either. The following is working perfectly fine for me:

<code>
	&lt;div class="grid-container"&gt;
</code>
1 Like

ah I see what I did wrong…I used &lg; instead of &gt;