Show source code without XMP tag

Question

How do I show HTML markup including tags without using the XMP element on an HTML5 website?

The website is made with HTML5 and shows tutorials about HTML, C++ etc.

So I need to show the source code of many programming languages.

Answer 1

The most often used alternative is to use the <pre> or <code> element and escape characters that have a special meaning in HTML. < would become <, > is escaped to >.

According to Can I escape html tags within a class (recreate the xmp tag)?, you can still use the XMP tag. Browsers should still support it, although according to What was the <XMP> tag used for?, <pre> is the preferred element to use.

Answer 2

The <pre> and <code> tags do not provide the same capability as the <pre> tag. I think it was a mistake for them to remove it from the specification and hopefully the browser writers will never remove it because I will continue to use it for those situations where I believe it appropriate.

Sometimes, you are wanting to display the exact contents of a bit of code (whether it is HTML, 'C', or whatever) and you do not want to introduce the possible errors that might occur if you start quoting the '<', '>', and whatever characters. Maybe it is a somewhat large 'C' program that you are wanting to quote, maybe some sample HTML code. For them to remove the tag and not provide something that can do the EXACT same thing is a bit naive at best.

I've looked at the HTML generated by this site for when you put in a bit of 'C' code and have something like:

#include <stdio.h>

in it. It replaces the '<' with '&lt;' and '>' with '&gt;' (which to type correctly in this point, I had to change to '&amp;lt' and '&amp;gt'). As you can see from this, it gets convoluted when you are trying to display sample HTML text and having the pre tag. I first encountered this problem when using a HTML page to document some code that I had written and the #include of stdio.h did not display correct due to the angle brackets.