JavaScript EditorBest javascript editor debugger     Ajax website 

Main Page

Previous Page
Next Page

Using a Monospaced Font

Every visitor to your page has two fonts specified in their browser's preferences: one regular, proportionally spaced one, and the other monospaced, like a typewriter's text. These are usually Times and Courier, respectively. If you are displaying computer codes, URLs, or other information that you wish to offset from the main text, you might want to format the text with the monospaced font.

Use code for formatting computer code in languages like C or Perl. The tt element (it stands for typewriter text) is for general monospaced text. Use kbd for formatting keyboard instructions. And samp is for displaying sample text. None of these tags is used very often. The truth is that monospaced text is kind of ugly.

To format text with a monospaced font:

Type <code>, <tt>, <kbd>, or <samp>.

Type the text that you want to display in a monospaced font.

Type </code>, </tt>, </kbd>, or </samp>. Use the tag that matches the one you chose in step 1.

Figure 4.6. The code element not only formats its contents with a monospaced font but also indicates that the contents are computer code. It's a logical g tag.

Figure 4.7. Monospaced text is perfect for URLs and computer code.

Figure 4.8. Text tagged with code, kbd, samp, or tt will be displayed in the font that your visitors have chosen for monospaced text in their browser. The Fonts box from IE 7 (shown) comes up when you choose Tools > Internet Options and then click the Fonts button in the General tab.


  • Remember that the monospaced font tags will not have a very dramatic effect in browsers that display all their text in monospaced fonts (like Lynx:

  • You can also format several lines of monospaced text with the pre tag (see page 73).

  • You can apply any font (that your visitor has installed) to your text with styles (see page 152).

Previous Page
Next Page

JavaScript EditorBest javascript editor debugger     Ajax website