• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Basic (X)HTML Formatting > Using a Monospaced Font

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.

The tt element (it stands for typewriter text) is the most common monospaced font tag. Use code for formatting computer code in languages like C or Perl. 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 <tt>, <code>, <kbd>, or <samp>.

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

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

Figure 4.7. 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 tag.


<h2>Perl Tutorial, Lesson 1</h2>

<p>If you're on a UNIX server, every Perl script
should start with a shebang line that describes the
path to the Perl interpreter on your server. The
shebang line might look like this:</p>


Figure 4.8. Monospaced text is perfect for URLs and computer code and anything else that should look kind of geeky.

Figure 4.9. Any text tagged with code, kbd, samp, or tt will be displayed in the font that your visitors have chosen for monospaced text for their browser. The dialog box shown here is the Windows Fonts box. It appears when you choose Tools > Internet Options from Explorer 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: http://www.delorie.com/web/lynxview.html).

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

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

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint