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).

HTML, XHTML, & CSS(c) Visual QuickStart Guide
HTML, XHTML, and CSS, Sixth Edition
ISBN: 0321430840
EAN: 2147483647
Year: 2004
Pages: 340

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: