HTML <tt> Tag

Beginner
⏱️ 5 min read
📚 Updated: Jun 2026
🎯 3 Examples
Text Formatting
HTML tt tag tutorial — teletype monospaced text for code and commands
Overview

What You’ll Learn

By the end of this tutorial, you’ll understand legacy teletype markup, when developers used it, and the modern HTML elements that replace it.

01

Historical Syntax

How <tt> rendered monospaced teletype text.

02

Obsolete Status

Why HTML5 removed <tt> from the specification.

03

tt vs code

Compare presentational teletype with semantic code markup.

04

Modern Replacements

Use code, kbd, samp, and pre instead.

05

Common Use Cases

Inline code snippets and command-line examples.

06

Legacy Maintenance

Recognize tt in old tutorials and migrate to modern tags.

Fundamentals

What Was the <tt> Tag?

The <tt> element was an inline HTML tag that displayed enclosed text in a teletype or monospaced font. Every character occupied the same width, which made it useful for code snippets, terminal commands, and technical documentation.

⚠️
Obsolete in HTML5 — Use code Instead

Do not use <tt> in new projects. Use <code> for inline code, <kbd> for keyboard input, <samp> for program output, and CSS font-family: monospace when you only need visual styling. Browsers still render tt for backward compatibility only.

HTML5 moved presentational formatting to semantic elements and stylesheets. Learn <tt> to read legacy HTML, but mark up code with <code> in all new work.

use-code-instead.html
<p>Run <code>print("Hello")</code> to greet the user.</p>
Foundation

📝 Syntax (Historical)

Wrap text between opening and closing <tt> tags:

syntax.html
<tt>Your Text Here</tt>
  • <tt> is an inline element—it nests inside paragraphs and lists.
  • Browsers applied a default monospace (teletype) font to the enclosed text.
  • Self-closing syntax (<tt />) is not valid in HTML.
Cheat Sheet

⚡ Quick Reference

Use CaseLegacy (tt)Modern Replacement
Inline code snippet<tt>print()</tt><code>print()</code>
Keyboard shortcut<tt>Ctrl+C</tt><kbd>Ctrl+C</kbd>
Program output<tt>Hello</tt><samp>Hello</samp>
Multi-line code blockMultiple tt tags (poor practice)<pre><code>...</code></pre>
Styled monospace only<tt style="...">CSS font-family: monospace on span or code
Comparison

⚖️ <tt> vs <code> vs <kbd> vs <samp>

These elements can look similar, but only the modern tags carry semantic meaning in HTML5:

ElementPurposeHTML5 status
<tt>Monospaced teletype text (presentation only)Obsolete — use code
<code>Inline code fragment or file nameValid — preferred for code snippets
<kbd>User keyboard inputValid — for shortcuts and keys
<samp>Sample or program outputValid — for terminal or app output
<pre>Preformatted multi-line blockValid — pair with code for blocks
Reference

🧰 Attributes

The <tt> tag had no tag-specific attributes. Global attributes and inline style could be applied, but modern semantic elements are the proper approach today:

class / id Global

Hook for CSS selectors—prefer a class on code instead of tt.

<code class="mono">
style Inline

Inline font-family worked but external CSS is cleaner.

style="font-family: monospace;"

The entire <tt> element is obsolete. Use code, kbd, samp, or CSS in new projects.

Hands-On

Examples Gallery

Historical <tt> patterns plus the modern <code> replacement. Legacy examples render for compatibility only—do not use in new code.

👀 Live Preview

Comparison of normal text vs teletype text (browsers still render <tt> for compatibility):

Normal: This is regular paragraph text.

Monospaced: This text uses a teletype font.

Styled Monospace Text

Apply a specific monospace font with the inline style attribute on <tt>.

⚠️ Obsolete tag — for learning only.
styled-tt.html
<p>This is an example of the <tt>tt</tt> tag:</p>
<tt style="font-family: 'Courier New', monospace;">Your Styled Text Here</tt>
Try It Yourself

📚 Common Use Cases (Historical)

Developers once used <tt> for inline code and terminal commands. Today use semantic elements instead.

Code Representation

Embed a short code snippet inside a sentence while keeping fixed-width spacing.

code-representation.html
<p>
  In this example, we use the <tt>print("Hello, World!")</tt> statement to display a message.
</p>
Try It Yourself

Command-Line Input

Show a shell command with monospace spacing—a common pattern in technical docs.

command-line-input.html
<p>Using the <tt> tag:</p>
<tt>$ cd /path/to/directory</tt>
Try It Yourself

Modern code Replacement

This is what beginners should use today. The <code> element conveys semantic meaning and is styled with CSS.

modern-code.html
<p>
  Run <code>print("Hello, World!")</code> to display a message.
</p>
<p>
  Then type <kbd>Enter</kbd> to execute.
</p>
Read code Tag Guide
A11y

♿ Accessibility

For readable, accessible code and technical text:

  • Use semantic elements — code, kbd, and samp communicate purpose to assistive technology
  • Avoid tt for code — it only changed appearance and carries no semantic meaning
  • Ensure contrast — monospace text on dark backgrounds needs sufficient color contrast
  • Pair pre with code — multi-line blocks should use <pre><code> for screen reader clarity

🧠 How <tt> Worked

1

Author wrapped text in tt

Mark words that should appear in a fixed-width teletype font.

Markup
2

Browser applied monospace font

Default user-agent styles rendered the text in a teletype or monospaced typeface.

Rendering
3

Semantic elements replaced tt

HTML5 introduced code, kbd, and samp for meaningful technical text.

Evolution
=

Today: use code

Learn tt for history. Mark up code with code in all new projects.

Compatibility

Browser Support

Browsers still render <tt> with monospace styling for backward compatibility, but the element is obsolete and not part of HTML5.

⚠ Obsolete · Use code

Legacy rendering only

All major browsers still apply default monospace styles to <tt> for old pages, but the tag is removed from the HTML5 specification. Never use it in new projects.

100% Legacy rendering
Google Chrome Legacy render · Obsolete
Legacy render
Mozilla Firefox Legacy render · Obsolete
Legacy render
Apple Safari Legacy render · Obsolete
Legacy render
Microsoft Edge Legacy render · Obsolete
Legacy render
Internet Explorer Legacy render · Obsolete
Legacy render
Opera Legacy render · Obsolete
Legacy render
<tt> tag 100% legacy rendering

Bottom line: Browsers render old tt markup, but the element is obsolete—use code for new work.

Wrap Up

Conclusion

The <tt> tag was a useful tool for displaying monospaced teletype text in early HTML, but HTML5 replaced it with semantic elements like <code>, <kbd>, and <samp>. Understanding its history helps you read legacy pages and migrate them to modern, accessible markup.

View Examples Gallery Learn the code tag
Pro Tips

💡 Best Practices

✅ Do

  • Use <code> for inline code fragments
  • Use <kbd> for keyboard shortcuts and typed input
  • Use <pre><code> for multi-line code blocks
  • Style monospace text with CSS classes
  • Recognize tt when maintaining legacy HTML

❌ Don’t

  • Use <tt> in new HTML5 projects
  • Rely on tt for semantic code meaning
  • Mix multiple obsolete formatting tags (tt, font, center)
  • Skip code when the content is actual source code
  • Forget contrast on dark terminal-style backgrounds
Summary

Key Takeaways

Knowledge Unlocked

Five truths every developer should know about <tt>

Bookmark these before you mark up your next code snippet.

5
Core concepts
📝 01

Teletype Text

<tt> rendered monospaced teletype text inline.

Foundation
⚠ 02

Obsolete in HTML5

Removed from the spec—do not use in new projects.

Essential
💻 03

Use code Instead

<code> is the modern inline code element.

Replacement
⌨ 04

kbd & samp

Keyboard input and program output have their own tags.

Semantics
🔄 05

Legacy Rendering

Browsers still render tt for backward compatibility.

Compatibility
🎯 You’re ready to use modern code markup
Review Quick Reference →

❓ Frequently Asked Questions

The <tt> element displayed text in a teletype or monospaced font. Developers used it for inline code snippets, command-line input, and any text where fixed character width mattered.
No. The tt tag is obsolete and removed from the HTML5 specification. Browsers still render it with monospace styling for backward compatibility.
Use <code> for inline code, <kbd> for keyboard input, <samp> for program output, and <pre> for multi-line blocks.
Both can look monospace, but code is the modern semantic element for code fragments. tt only changed presentation and is obsolete.
No. Beginners should use code for inline snippets and pre for blocks. Learn tt only to recognize it in legacy tutorials.
Yes, browsers still apply styles to tt in legacy pages. In new projects, apply font-family: monospace to code or a CSS class instead.

Mark up code the modern way

Practice legacy <tt> examples, then switch to <code> for real projects.

Try styled tt example →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

5 people found this page helpful

HTML track Tag HTML u Tag