Web Design Made Simple Web Design Made Simple

debbie T Designs - Web Design Made Simple

The Code and Pre Tags

The <code> Tag

You may have noticed in viewing these tutorials (or other tutorials on the web,) xhtml code can be displayed directly on a web page; the browser does not render it as code, but allows it to remain as visible text.

So, how can this be accomplished?

  • The < left bracket can be visually displayed on your web page by using the special character of &lt; which is the "less than" character.
  • Same with the > right bracket. The special character to use is &gt; which is the "greater than" character.
  • When you want to display text specifically as code, the <code> </code> tag set should be used. This informs the browser that the contained text should not be rendered as real code, but should be visually displayed on the web page as example code. Most browsers, by default, will format the text in a monospace font – just like in Notepad.

For example, to visually display the following code on a web page:

<p>paragraph text here.</p>

The actual (x)html code would look like this:

&lt;p&gt;paragraph text here.&lt;/p&gt;

Important to remember:

  • The <code> tag should be nested in a block-level tag, but not vice verse.
  • Do not use the <code> tag to format any miscellaneous text in a monospace font. Use it only for its intended purpose, to display code.

Preset Text with <pre> Tag

You must have noticed by now, that tabs, spaces, and enter breaks do not affect the actual rendered spacing on your web page. Well, there is a way around that.

When the <pre> </pre> tag set is used, any tabs, spaces, or enter breaks will render exactly as is. It is "pre-formatted" text.

Important to Remember

  • Be careful when using the <pre> tag. It should not be used to align text on the page. It is generally used similarly to the <code> tag to display coding blocks on your page. Always make sure to view your page in a smaller browser window to ensure that any longer lines of text do not cause a horizontal scroll bar.
  • Do not use any other formatting tags in the <pre> tag, although the <code> tag can be contained inside a <pre> tag.
  • Do not nest any block-level tags inside the <pre> tag. It is okay to nest the <pre> tag inside a <div> tag, but <p> and <hx> tags are no-no’s.
  • Most browsers will visually display the pre-formatted text with a monospace font.
  • If you want to format the <pre> text to display in a different font or color, you can easily define CSS styles for it by using the "pre" selector in a CSS rule.

Check out the pre.html file for examples of both the <pre> and <code> tags.

Ascii Art

Ascii art is all text…and fun to view. It is easily displayed on a web page using the <pre> tag. You can come up with your own designs if you want! Here some links that might inspire you.

Please note: some ascii art is copyrighted, so do not copy and paste any art unless the author gives permission to use it.

2 Comments

  1. Comment by Destiny on November 5th, 2007

    Wow! I have seen a few ASCII pictures before (didn’t know what it was called) and there some simple nice ones. The ones in arkworld are amazing!!

    Thank you.

  2. Comment by debbie T on November 5th, 2007

    Cool, Destiny! I am glad you found some cool ones! Thanks again for commenting. I appreciate it so much!