The deprecated <tt> element rendered text in a monospace 'teletype' font; use <code> for code or CSS font-family for generic monospace styling instead.

Syntax

<!-- Deprecated: -->
<tt>monospace text</tt>
<!-- Modern equivalent: -->
<code>monospace text</code>

Deep Dive Course

**`<tt>`** (short for 'teletype', referencing old fixed-width terminal printers) rendered text in a monospace font with no other semantic meaning. It was removed in HTML5 in favor of more specific, semantically meaningful elements: `<code>` for code snippets, `<kbd>` for keyboard input, `<samp>` for program output, or plain CSS `font-family: monospace` when none of those specific meanings apply.

1Understanding <tt>

`<tt>` (short for 'teletype', referencing old fixed-width terminal printers) rendered text in a monospace font with no other semantic meaning. It was removed in HTML5 in favor of more specific, semantically meaningful elements: <code> for code snippets, <kbd> for keyboard input, <samp> for program output, or plain CSS font-family: monospace when none of those specific meanings apply.

💡

If you just want a monospace visual style with no code-related meaning, use CSS font-family: monospace on a <span> rather than reaching for a deprecated tag.

editor.html

<!-- Old, deprecated markup -->
<p>Type <tt>cd my-project</tt> to enter the folder.</p>

localhost:3000

2Practical Example

Here is a real-world application of <tt> showing how it is used in production HTML.

editor.html

<!-- Correct modern replacement -->
<p>Type <code>cd my-project</code> to enter the folder.</p>

localhost:3000

3Best Practices

Follow these guidelines when working with <tt>:

1. Don't use <tt> in new code — use <code>, <kbd>, or <samp> depending on the actual meaning

2. Use CSS font-family: monospace for purely visual fixed-width styling

3. Migrate legacy <tt> usage to the semantically correct modern element

⚠️

Tip: If you just want a monospace visual style with no code-related meaning, use CSS font-family: monospace on a <span> rather than reaching for a deprecated tag.

editor.html

<!-- Old, deprecated markup -->
<p>Type <tt>cd my-project</tt> to enter the folder.</p>

localhost:3000

Examples

Example 01Basic Usage

<!-- Old, deprecated markup -->
<p>Type <tt>cd my-project</tt> to enter the folder.</p>

Example 02Advanced Example

<!-- Correct modern replacement -->
<p>Type <code>cd my-project</code> to enter the folder.</p>

Best Practices

Don't use in new code — use , , or depending on the actual meaning
Use CSS font-family: monospace for purely visual fixed-width styling
Migrate legacy usage to the semantically correct modern element

`Interview Question`

What replaced <tt> in HTML5, and why is there no single direct replacement?▼

Hint: Think about the different reasons someone might have used monospace text.

There's no single 1:1 replacement because <tt> was used for many different purposes that HTML5 split into semantically distinct elements: <code> for source code, <kbd> for user keyboard input, <samp> for sample program output, and <var> for variable names — each conveying different meaning to assistive technology, plus plain CSS font-family: monospace for cases with no semantic meaning at all.

`Exercises`

EasyPractice using <tt> in a real scenario.

View Solution

<!-- Old, deprecated markup -->
<p>Type <tt>cd my-project</tt> to enter the folder.</p>

`Frequently Asked Questions`

What replaced <tt> in HTML5, and why is there no single direct replacement?▼

There's no single 1:1 replacement because was used for many different purposes that HTML5 split into semantically distinct elements: for source code, for user keyboard input, for sample program output, and for variable names — each conveying different meaning to assistive technology, plus plain CSS font-family: monospace for cases with no semantic meaning at all.

`Related Functions`

code-tagsamp-tagvar-tag