HTML <tt> Element

HTML <tt> Element

The <tt> element, short for teletype text, was used to display text in a monospace or fixed-width font. It was commonly used for computer-related text because early terminals, teletypes, and computer displays typically used characters of equal width.

Historical Syntax

Older HTML documents could contain markup similar to the following:

<p>Enter <tt>index.html</tt> as the filename.</p>

A supporting browser normally displayed index.html in a fixed-width font. The <tt> element controlled the appearance of the text but did not identify what the text represented. This code is shown for historical reference only and should not be used in modern HTML.

Attributes

The <tt> element did not have any element-specific attributes. Its historical presentation came from the browser's default styling, which normally displayed its contents in a monospace font.

Historical Use

The name <tt> comes from teletype machines, which printed characters using a fixed-width format. Early computer terminals and displays commonly used the same type of character spacing, making monospace text strongly associated with computer output.

Web authors used <tt> for filenames, commands, source code, technical terms, computer output, and other text they wanted displayed in a typewriter-like or terminal-style font.

The element did not distinguish between these different types of content. A filename, keyboard command, code fragment, and sample program output could all be placed inside <tt> simply because the author wanted them to appear in monospace text.

Why It Became Obsolete

The <tt> element became obsolete because its purpose was primarily presentational. Modern HTML provides semantic elements that describe different types of computer-related text, while CSS can control the font when only the visual appearance matters.

For example, <code> identifies computer code, <kbd> represents user input, <samp> represents sample computer output, and <var> represents a variable. These elements describe what the content means rather than simply requesting a particular font.

If text has no special semantic meaning but should appear in a fixed-width typeface, CSS can apply a monospace font without adding a presentational HTML element.

Modern Alternative

The correct replacement for <tt> depends on what the text represents. Use <code> for a fragment of computer code:

<p>Use the <code>&lt;h1&gt;</code> element for the main heading.</p>

Use <kbd> for keyboard or other user input:

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save the file.</p>

Use <samp> for sample output produced by a computer or program:

<p>The browser displays: <samp>Page not found</samp></p>

When a monospace appearance is needed without any special semantic meaning, use CSS:

<span class="monospace">Monospace text</span>

.monospace {
  font-family: monospace;
}

Using the element that best describes the content provides more meaningful HTML, while CSS remains responsible for purely visual font choices.

Legacy Browser Support

The <tt> element is obsolete, but modern browsers generally continue to recognize and display it in a monospace font for compatibility with older webpages. This legacy browser support does not make the element valid for use in modern HTML.

Existing <tt> elements should be replaced with the semantic element that best represents the content or with CSS when the original purpose was only to create a monospace appearance.

For detailed legacy browser compatibility information, see Can I Use: HTML <tt> Element .

Related Elements

The <code> element identifies computer code, the <kbd> element represents user input, the <samp> element represents sample computer output, and the <var> element represents a variable or placeholder.

Specifications

The <tt> element is listed as an entirely obsolete, non-conforming feature in the WHATWG HTML Living Standard . Authors should use an appropriate semantic element or CSS instead.