<tt> - Teletype Text (Deprecated)

The `<tt>` Element

Deprecated HTML 2.0

The <tt> element (short for “teletype text”) was used to display text in a monospace or fixed-width font, similar to the output from a typewriter or early computer terminals. It rendered text in the browser’s default monospace font without conveying any specific semantic meaning.

Historical Syntax

<tt>Text in monospace font</tt>

The <tt> element had no specific attributes beyond the standard global HTML attributes. It was a purely presentational element that only changed the visual appearance of text.

Historical Example

This example shows how the <tt> element was used in older HTML documents:

<p>
This is normal text, but <tt>this is teletype text</tt> in monospace.
</p>

<p>
File path: <tt>/usr/local/bin/program</tt>
</p>

<p>
Command: <tt>ls -la</tt>
</p>

<p>
Variable: <tt>userName</tt>
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>
This is normal text, but <tt>this is teletype text</tt> in monospace.
</p>

<p>
File path: <tt>/usr/local/bin/program</tt>
</p>

<p>
Command: <tt>ls -la</tt>
</p>

<p>
Variable: <tt>userName</tt>
</p>

Why It’s Deprecated

The <tt> element was deprecated and removed for several important reasons:

1. No Semantic Meaning

The <tt> element was purely presentational. It only changed how text looked without conveying any information about what the text represents. Modern HTML emphasizes semantic markup that describes the meaning of content, not just its appearance.

2. Better Semantic Alternatives Exist

HTML5 provides semantic elements that convey meaning while also displaying in monospace:

<code> for code snippets
<kbd> for keyboard input
<samp> for sample program output
<var> for variables
<pre> for preformatted text

3. Separation of Concerns

Presentation should be handled by CSS, not HTML. The <tt> element mixed content with styling, making maintenance harder and limiting design flexibility.

4. Limited Accessibility

Screen readers treated <tt> as regular text, providing no context about why the text was in monospace. Semantic alternatives help assistive technologies convey meaning to users.

Modern Alternatives

Choose the appropriate semantic element based on what the content represents, or use CSS for purely visual styling.

`<code>` for Code Snippets

Use <code> when displaying computer code, file names, or program names:

<p>
Use the <code>addEventListener()</code> method to attach event handlers.
</p>

<p>
Edit the <code>config.json</code> file to change settings.
</p>

<p>
The function returns a <code>Promise&lt;string&gt;</code>.
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>
Use the <code>addEventListener()</code> method to attach event handlers.
</p>

<p>
Edit the <code>config.json</code> file to change settings.
</p>

<p>
The function returns a <code>Promise&lt;string&gt;</code>.
</p>

`<kbd>` for Keyboard Input

Use <kbd> to represent user input from a keyboard:

<p>
Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.
</p>

<p>
Type <kbd>help</kbd> and press <kbd>Enter</kbd>.
</p>

<p>
Use <kbd>⌘</kbd> + <kbd>S</kbd> to save on Mac.
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>
Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.
</p>

<p>
Type <kbd>help</kbd> and press <kbd>Enter</kbd>.
</p>

<p>
Use <kbd>⌘</kbd> + <kbd>S</kbd> to save on Mac.
</p>

`<samp>` for Sample Output

Use <samp> to represent sample output from a program or system:

<p>
If successful, you'll see: <samp>Connection established</samp>
</p>

<p>
The command returns: <samp>Error 404: File not found</samp>
</p>

<p>
Console output: <samp>Build completed successfully in 2.3s</samp>
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>
If successful, you'll see: <samp>Connection established</samp>
</p>

<p>
The command returns: <samp>Error 404: File not found</samp>
</p>

<p>
Console output: <samp>Build completed successfully in 2.3s</samp>
</p>

`<var>` for Variables

Use <var> to represent mathematical variables or programming variables:

<p>
The area of a rectangle is <var>width</var> × <var>height</var>.
</p>

<p>
Set the <var>maxRetries</var> parameter to control retry behavior.
</p>

<p>
Calculate: <var>x</var> = <var>a</var> + <var>b</var>
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>
The area of a rectangle is <var>width</var> × <var>height</var>.
</p>

<p>
Set the <var>maxRetries</var> parameter to control retry behavior.
</p>

<p>
Calculate: <var>x</var> = <var>a</var> + <var>b</var>
</p>

CSS `font-family: monospace` for Visual Styling

When you need monospace font for purely visual reasons without semantic meaning:

<style>
.monospace {
  font-family: "Courier New", Courier, monospace;
}

.console {
  font-family: "Consolas", "Monaco", monospace;
  background-color: #f5f5f5;
  padding: 2px 6px;
  border-radius: 3px;
}
</style>

<p>
This text is in <span class="monospace">monospace font</span>.
</p>

<p class="console">
This paragraph has a console-like appearance.
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.monospace {
  font-family: "Courier New", Courier, monospace;
}

.console {
  font-family: "Consolas", "Monaco", monospace;
  background-color: #f5f5f5;
  padding: 2px 6px;
  border-radius: 3px;
}
</style>

<p>
This text is in <span class="monospace">monospace font</span>.
</p>

<p class="console">
This paragraph has a console-like appearance.
</p>

Choosing the Right Element

Use this decision tree to select the appropriate alternative:

Is it computer code, a function name, or a file name?

Use <code>: <code>function()</code>

Is it keyboard input the user should type?

Use <kbd>: <kbd>Enter</kbd>

Is it program or computer output?

Use <samp>: <samp>Success!</samp>

Is it a variable in math or programming?

Use <var>: <var>x</var>

Is it multi-line preformatted text?

Use <pre>, often with <code> inside:

<pre><code>function example() {
  return true;
}</code></pre>

Does it just need to look monospace without semantic meaning?

Use CSS: <span style="font-family: monospace;">text</span>

Migration Guide

Here’s how to convert <tt> elements to modern semantic alternatives:

Old (Deprecated)
Modern (Semantic)

<!-- Code-related -->
<tt>myFunction()</tt>
<tt>config.json</tt>
<tt>npm install</tt>

<!-- User input -->
<tt>Enter</tt>
<tt>Ctrl+C</tt>

<!-- Program output -->
<tt>Error: Connection failed</tt>
<tt>Success!</tt>

<!-- Variables -->
<tt>x</tt> and <tt>y</tt>

<!-- Generic monospace -->
<tt>just monospace text</tt>

<!-- Code-related -->
<code>myFunction()</code>
<code>config.json</code>
<code>npm install</code>

<!-- User input -->
<kbd>Enter</kbd>
<kbd>Ctrl</kbd>+<kbd>C</kbd>

<!-- Program output -->
<samp>Error: Connection failed</samp>
<samp>Success!</samp>

<!-- Variables -->
<var>x</var> and <var>y</var>

<!-- Generic monospace -->
<span style="font-family: monospace;">just monospace text</span>

<tt>function add(a, b) {
  return a + b;
}</tt>

<pre><code>function add(a, b) {
  return a + b;
}</code></pre>

Styled Monospace with CSS

Inline Style
CSS Class (Best)

<span style="font-family: monospace;">monospace text</span>

<!-- HTML -->
<span class="mono">monospace text</span>

<!-- CSS -->
<style>
  .mono {
    font-family: "Monaco", "Consolas", "Courier New", monospace;
  }
</style>

Combining Semantic Elements

Semantic elements can be styled with CSS and combined for enhanced meaning:

<style>
code {
  background-color: #f4f4f4;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: "Monaco", "Consolas", monospace;
}

kbd {
  background-color: #333;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.9em;
}

samp {
  background-color: #e8f4f8;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
}
</style>

<p>
Run <code>npm test</code> and press <kbd>Enter</kbd>.
</p>

<p>
Expected output: <samp>All tests passed ✓</samp>
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
code {
  background-color: #f4f4f4;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: "Monaco", "Consolas", monospace;
}

kbd {
  background-color: #333;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.9em;
}

samp {
  background-color: #e8f4f8;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
}
</style>

<p>
Run <code>npm test</code> and press <kbd>Enter</kbd>.
</p>

<p>
Expected output: <samp>All tests passed ✓</samp>
</p>

Historical Browser Support

The <tt> element was supported by all major browsers during its lifetime:

Browser	Supported	Current Status
Chrome	1-Current	Still renders (legacy support)
Firefox	1-Current	Still renders (legacy support)
Safari	1-Current	Still renders (legacy support)
Edge	12-Current	Still renders (legacy support)
IE	3-11	Rendered in IE11

 Represents a fragment of computer code with semantic meaning.
Learn more →

     
 Represents user input from a keyboard or other input device.
Learn more →
 
     
 Represents sample or quoted output from a program or system.
Learn more →
 
     
 Represents a variable in mathematical or programming context.
Learn more →
 
    
 
 Represents preformatted text with preserved whitespace and line breaks.
Learn more →
 
     
 Generic inline container for applying CSS styles without semantic meaning.
Learn more →

 
Specifications
Section titled “Specifications”
The <tt> element appeared in early HTML specifications but was deprecated in HTML5:
HTML 4.01 Specification (Deprecated):
https://www.w3.org/TR/html401/present/graphics.html#h-15.2.1
WHATWG HTML Living Standard (Obsolete):
https://html.spec.whatwg.org/multipage/obsolete.html#tt
MDN Web Docs (Deprecated):
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt
For modern semantic alternatives, see:
<code> element:
https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element
<kbd> element:
https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-kbd-element
<samp> element:
https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-samp-element
<var> element:
https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-var-element

     
     Previous 
 <blink> - Blinking Text (Deprecated)      Next 
 <spacer> - Whitespace Control (Deprecated)

<tt> - Teletype Text (Deprecated)

The <tt> Element

Historical Syntax

Historical Example

Why It’s Deprecated

Modern Alternatives

<code> for Code Snippets

<kbd> for Keyboard Input

<samp> for Sample Output

<var> for Variables

CSS font-family: monospace for Visual Styling

Choosing the Right Element

Migration Guide

Complex Code Blocks

Styled Monospace with CSS

Combining Semantic Elements

Historical Browser Support

Related Elements

Specifications

The `<tt>` Element

`<code>` for Code Snippets

`<kbd>` for Keyboard Input

`<samp>` for Sample Output

`<var>` for Variables

CSS `font-family: monospace` for Visual Styling