How to Display an HTML Block of Code on a Page

Posted on by Victoria

The answer is to use this method for HTML:

  1. Replace the & character with &
  2. Replace the < character with &lt;
  3. Replace the > character with &gt;
  4. Optionally surround your HTML sample with <pre> and/or <code> tags.
Read more about the <pre> and <code> tags.

Example 1


  
   This text has been formatted using the HTML <pre> tag. The brower should display all white space as it was entered.

Example 2



    This text has been formatted using the HTML <pre> and <code> tags.

Example 3


        This text has been formatted using the HTML <blockquote>, <pre> and <code> tags.

Example 4

CSS Formatting for a block of code.

pre {
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
margin-bottom: 10px;
overflow: auto;
width: auto;
padding: 5px;
background-color: #eee;
width: 650px!ie7;
padding-bottom: 20px!ie7;
max-height: 600px;
}