<tt>

Definition and Usage

The <tt> tag was used in older versions of HTML to define teletype text, which rendered in a monospace (fixed-width) font similar to typewriter text.

This tag has been replaced by more semantic alternatives like <code>, <kbd>, <samp>, or <var>, or by using CSS for purely presentational monospace styling.

Attributes

The <tt> tag only supported the Global Attributes in HTML.

It also supported the Event Attributes in HTML.

Migration Guide: Modern Alternatives

Choose the Right Alternative

• <code>: For computer code snippets
• <kbd>: For keyboard input or user input
• <samp>: For sample output from a computer program
• <var>: For mathematical or programming variables
• CSS monospace: For purely presentational monospace text

<tt>monospace text</tt>

<!-- For code -->
<code>monospace text</code>

<!-- For keyboard input -->
<kbd>monospace text</kbd>

<!-- For sample output -->
<samp>monospace text</samp>

<!-- For CSS styling -->
<span style="font-family: monospace;">monospace text</span>

Examples

Old Way (Don't Use)

This is how the deprecated tag was used in HTML 4.01:

<p>This is <tt>teletype text</tt> in HTML 4.01.</p>

Modern Alternative: Using <code> Tag

Use <code> for computer code snippets:

<p>Use the <code>console.log()</code> function to print to the console.</p>

Modern Alternative: Using <kbd> Tag

Use <kbd> for keyboard input or user input:

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

Modern Alternative: Using <samp> Tag

Use <samp> for sample output from a computer program:

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

Modern Alternative: Using CSS

Use CSS for purely presentational monospace styling:

<!-- Inline style -->
<span style="font-family: monospace;">This is monospace text</span>

<!-- CSS class -->
<style>
  .monospace {
    font-family: 'Courier New', Courier, monospace;
  }
</style>
<span class="monospace">This is monospace text</span>

Complete Code Example

Combining multiple alternatives in a real-world scenario:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Modern Monospace Text</title>
  <style>
    .terminal {
      font-family: 'Courier New', Courier, monospace;
      background-color: #1e1e1e;
      color: #00ff00;
      padding: 10px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>Programming Tutorial</h1>

  <p>To print "Hello World", use <code>console.log("Hello World")</code></p>

  <p>Press <kbd>F12</kbd> to open developer tools.</p>

  <p>Output: <samp>Hello World</samp></p>

  <div class="terminal">
    $ npm install
    Installing packages...
  </div>
</body>
</html>

Advanced CSS Monospace Styling

Create custom monospace styles with CSS:

<style>
  .code-inline {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    background-color: #f5f5f5;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
    color: #c7254e;
  }

  .code-block {
    font-family: 'Fira Code', 'Consolas', monospace;
    background-color: #2d2d2d;
    color: #f8f8f2;
    padding: 16px;
    border-radius: 6px;
    overflow-x: auto;
    line-height: 1.6;
  }

  [data-theme="dark"] .code-inline {
    background-color: #2d2d2d;
    color: #f92672;
  }
</style>

<p>Use the <span class="code-inline">Array.map()</span> method.</p>

<pre class="code-block">const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6]</pre>

Comparison Table: <tt> vs Modern Alternatives

Why Was It Deprecated?

• Lack of Semantic Meaning: The <tt> tag only described appearance, not meaning or purpose
• Better Alternatives Exist: HTML5 provides semantic tags that describe the actual content type
• Separation of Concerns: Presentation (monospace font) should be handled by CSS, not HTML
• Accessibility: Semantic tags like <code>, <kbd>, and <samp> provide better context for screen readers
• Maintainability: Semantic HTML is easier to understand and maintain
• Modern Standards: HTML5 emphasizes semantic meaning over presentational markup
• SEO Benefits: Search engines understand semantic tags better than purely presentational ones

Try it Yourself

Best Practices

• Never use <tt> - It's deprecated and your HTML won't validate
• Choose semantic tags - Use <code>, <kbd>, or <samp> based on context
• Use CSS for presentation - Apply monospace fonts with CSS when no semantic meaning is needed
• Consider accessibility - Semantic tags provide better context for assistive technologies
• Use monospace fonts - 'Courier New', Consolas, Monaco, or modern code fonts like 'Fira Code'
• Style appropriately - Add background colors, padding, and borders to code snippets for better readability
• Validate your HTML - Use W3C validator to ensure you're not using deprecated tags
• Update legacy code - Replace <tt> tags in old HTML with modern alternatives

Related Tags

• <code>

  Defines computer code text

• <kbd>

  Defines keyboard input

• <samp>

  Defines sample output

• <var>

  Defines a variable

• <pre>

  Defines preformatted text