Tutorial Ref.com

Display HTML Code PRE, deprecated XMP, CODE tags-W3C Validate-Preformat HTML Code

Tutorial Ref >> HTML Tutorial >> Display HTML Code W3C Validated

Date modified - April 3, 2009

Properly displaying HTML code in browsers to be compatible for IE 7.x, Firefox 3.x and Safari 3.2 and greater is simple. It's using a combination of the HTML tags <pre> and <code> tags. In addition, in order to properly format HTML code you'll need to use "ampersand characters" (aka "character entities"). For instance, using a less than sign (<) should be typed as &lt; if using the character entity. If you choose to use a number entity then the less than sign (<) is typed as &#60;.

Ampersand Characters (Character Entities), Numbered Entities for Preformatting HTML code to display in browser:

Character Entity Number Entity Symbol Description
&lt; &#60; < less-than sign
&gt; &#62; > greater-than sign
&quot; &#34; " double quote
&amp; &#38; & ampersand

Here is an example of displaying and preformatting HTML code to display in browers:

1
2
3

<p>This is a sample of displaying and preformatting HTML code to display properly and that validates under W3C standards.</p>
    <div>This is a div tag. I've used the character entities for the HTML P tage and in the DIV tag</div>
    <div>In this div tag I've used the numbered entities for the less than and greater than signs. Though you can't see it displayed in the browser you can check in the source code of the browser.</div>

Here is the how the above code is coded:

1
2
3

<pre><code><p>This is a sample of displaying and preformatting HTML code to display properly and that validates under W3C standards.</p>
    <div>This is a div tag. I've used the character entities for the HTML P tage and in the DIV tag</div>
    <div>In this div tag I've used the numbered entities for the less than and greater than signs. Though you can't see it displayed in the browser you can check in the source code of the browser.</div></code></pre>

You can quickly change the less than signs, greater than signs and quotes are any other special characters to numbered entities or characters entities by using your IDE or simply using notepad or TextPad for MAC. Do not use word processing programs like MS Word;otherwise, your HTML code may not display the way you wish. MS Word formats special characters differently.

XMP Tag is deprecated from W3C Validation

If you wish to validate your code to W3C standards and it's always advisable to do so then do not use the HTML <xmp> tags.

TutorialRef.com - tutorials, guides, how-tos, helps