Showing Code on Your Webpage

The problem with a lot of 'how to show code' tutorials on the Internet is that they teach you completely the wrong things! I've seen countless tutorials telling people to wrap the code in a <textarea> or just leave spaces between the <, > and the tag name — ALL wrong. And no, not just wrong because it's my personal preference, but semantics wrong and standards wrong.

The key to displaying code properly is to replace the HTML entities like < with their name/number equivalent. The most common entities and their replacements are as follows:

Result	Entity Name	Entity Number
"	"	"
'	' (except IE)	'
&	&	&
<	<	<
>	>	>

Semantically speaking, the code with it's new entities should be wrapped in the <code> </code> tags which can be customised like any other tag with CSS.

..but `<textarea>`s look neat & tidy?

So? That's no excuse. Why not just alter the way the <code> </code> tags look, to imitate the textarea but without having to misuse the tag? Add a class (remember: classes can be used multiple times) to the <code> tag that you want to appear in a box, and add the following to your CSS:

code.class-name { display: block; background: #fff; border: 1px solid #7F9DB9; width: 100%; height: 80px; overflow: auto; }

Then, simply wrap your code areas up like so:
<code class="class-name"> <tag> </code>

Neat, tidy code, and no tag-abuse.

Tags: semantics, html, entities,
Last Updated On: 08th May 06 by Jem
Bookmark At: StumbleUpon, Digg