HTML tt Tag - Learn HTML

The <tt> (teletype) tag is obsolete and was removed from HTML5 — do not use it. It once rendered inline text in a monospace, fixed-width font, as it would have appeared on a teletype or typewriter. Modern browsers may still display it, but it has no semantic meaning and is not valid HTML. Use a semantic element or CSS instead.

Danger

<tt> is a deprecated HTML tag. It is listed only for reference. New documents must not use it.

The terms monotype, monospace, and non-proportional are interchangeable: they all describe a typeface whose characters occupy the same horizontal width, so columns of text line up.

What to use instead of `<tt>`

<tt> was purely presentational — it said nothing about why text was in monospace. HTML5 replaces it with elements that carry meaning, plus CSS for the rare cases where you only want the monospace look.

You want to mark up…	Use	Example
Source code, a tag, a command	`<code>`	`<code>git commit</code>`
Keyboard input the user should type	`<kbd>`	`<kbd>Ctrl</kbd>`
Output produced by a program	`<samp>`	`<samp>Build passed</samp>`
A variable or placeholder name	`<var>`	`<var>filename</var>`
Monospace purely for presentation	a CSS class with `font-family: monospace`	see below

<pre> is not a direct replacement: the <pre> tag preserves whitespace and line breaks (preformatted text). It is about layout, not about the meaning of the text, and is often combined with <code> for code blocks.

Choosing the right element

Use a semantic element (<code>, <kbd>, <samp>, <var>) whenever the text means something — this improves accessibility and lets you style each kind differently. All four render in a monospace font by default.
Use CSS only when you want the monospace appearance with no special meaning. Apply it through a class or a <style> rule, not an inline style attribute, so the presentation stays in your stylesheet.

Semantic replacements in use

This example shows <code>, <kbd>, and <samp> working together in a realistic instruction:

<!DOCTYPE html>
<html>
  <head>
    <title>Replacing the tt tag</title>
  </head>
  <body>
    <p>
      Stage your changes with <kbd>git add .</kbd>, then run
      <code>git commit -m "message"</code>.
    </p>
    <p>
      On success Git prints <samp>1 file changed</samp>.
    </p>
  </body>
</html>

CSS monospace for presentation only

When you only need the monospace look — with no semantic meaning — define a class in CSS instead of using <tt> or an inline style:

<!DOCTYPE html>
<html>
  <head>
    <title>Monospace text with CSS</title>
    <style>
      .mono {
        font-family: monospace;
      }
    </style>
  </head>
  <body>
    <p>This is an ordinary text.</p>
    <p class="mono">And this is monospaced text.</p>
  </body>
</html>

Try it Yourself »

See the CSS font-family property for more on font stacks.

Legacy `<tt>` syntax (do not use)

For reference only, the obsolete <tt> element was written as a pair of tags with the content between them:

<!-- Obsolete: removed from HTML5. Shown for reference only. -->
<p>This is an ordinary text.</p>
<p><tt>And this is a teletype text.</tt></p>

Practice

The HTML tt tag is obsolete. Which choice lists the recommended HTML5 replacements?

Keep using the tt tag; it still works in every browserThe font and color tagsOnly the pre tag, since it also renders monospaceThe code, kbd, samp and var tags for meaning, or CSS font-family: monospace for presentation only

What to use instead of <tt>