<tt>

NOT supported in HTML5. Use modern alternatives instead.

⚠️ DEPRECATED

Definition and Usage

⚠️ Warning: The <tt> tag is NOT supported in HTML5. This tag was deprecated in HTML 4.01 and completely removed in HTML5.

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.

Important: Do NOT use this tag! Modern browsers may still render it for backward compatibility, but it is not valid HTML5. Always use semantic HTML5 tags or CSS for text styling.

Browser Support

The <tt> tag is NOT supported in HTML5:

Chrome

Not Supported

Firefox

Not Supported

Safari

Not Supported

Edge

Not Supported

Opera

Not Supported

Attributes

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

It also supported the Event Attributes in HTML.

Migration Guide: Modern Alternatives

✓ Modern Approach: Use semantic HTML5 tags like <code>, <kbd>, <samp>, or <var> depending on the context, or use CSS font-family: monospace for purely presentational styling.

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

❌ Old Way (Deprecated)

<tt>monospace text</tt>

✓ Modern Ways (Recommended)

<!-- 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:

❌ Deprecated 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:

Example
<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:

Example
<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:

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

Modern Alternative: Using CSS

Use CSS for purely presentational monospace styling:

Example
<!-- 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:

Example
<!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:

Example
<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

Tag	Purpose	When to Use	Example
`<tt>`	Teletype text (deprecated)	Never - use alternatives	<tt>text</tt>
`<code>`	Computer code	Programming code, function names, method names	<code>alert()</code>
`<kbd>`	Keyboard input	Keyboard shortcuts, user input instructions	<kbd>Ctrl+S</kbd>
`<samp>`	Sample output	Program output, terminal messages, error messages	<samp>Error 404</samp>
`<var>`	Variable	Mathematical or programming variables	<var>x</var> = 10
`CSS`	Presentational styling	Generic monospace text without semantic meaning	style="font-family: monospace"

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

Interactive Example

Compare deprecated vs modern approaches:

❌ Old Way (Don't use this!):

<tt>monospace text</tt>

✓ Modern Ways (Use these!):

<code>console.log()</code> - for code <kbd>Ctrl+C</kbd> - for keyboard input <samp>Error 404</samp> - for output <span style="font-family: monospace;">text</span> - for CSS

Try Modern Alternatives in Code Playground

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