HTML <tt> Tag

The <tt> tag was used in older versions of HTML to render text in a fixed-width font, resembling the output of a teletype machine. This tag was intended for content where the visual appearance of the text was crucial, such as code snippets or computer output. However, it has been deprecated in favor of CSS styling. Modern browsers may still render it, but its use is strongly discouraged. You should use more semantic tags and style them with CSS.

Syntax

<tt>Teletype text</tt>

Attributes

Example

<p>This is normal text.</p>
<tt>This is teletype text.</tt>

More Examples

Example 1: Showing code snippet using deprecated tag

<p>This might be how you'd display code in old HTML:</p>
<tt>
  &lt;html&gt;<br>
  &nbsp; &lt;head&gt;<br>
  &nbsp; &nbsp; &lt;title&gt;Example&lt;/title&gt;<br>
  &nbsp; &lt;/head&gt;<br>
  &nbsp; &lt;body&gt;<br>
  &nbsp; &nbsp; &lt;p&gt;Hello World!&lt;/p&gt;<br>
  &nbsp; &lt;/body&gt;<br>
  &lt;/html&gt;
</tt>

Example 2: Simulating computer output with the deprecated tag

<p>The output of the command might look like this:</p>
<tt>
C:\> dir<br>
Volume in drive C has no label.<br>
Volume Serial Number is XXXX-XXXX<br>
Directory of C:\<br>
<br>
05/20/2024  10:00 AM    &lt;DIR&gt;          . <br>
05/20/2024  10:00 AM    &lt;DIR&gt;          .. <br>
01/15/2024  11:20 AM              1234 example.txt <br>
       1 File(s)          1234 bytes <br>
       2 Dir(s)      123456789 bytes free<br>
</tt>

Example 3: Correct way to achieve the same output using code tag and CSS

<p>The correct way to display code snippets or computer output:</p>
<pre style="font-family: monospace; background-color: #f0f0f0; padding: 10px; overflow-x: auto;">
  <code>
  &lt;html&gt;<br>
  &nbsp; &lt;head&gt;<br>
  &nbsp; &nbsp; &lt;title&gt;Example&lt;/title&gt;<br>
  &nbsp; &lt;/head&gt;<br>
  &nbsp; &lt;body&gt;<br>
  &nbsp; &nbsp; &lt;p&gt;Hello World!&lt;/p&gt;<br>
  &nbsp; &lt;/body&gt;<br>
  &lt;/html&gt;
  </code>
</pre>

<p>
    <pre style="font-family: monospace; background-color: #f0f0f0; padding: 10px; overflow-x: auto;">
       <code>
         C:\> dir<br>
         Volume in drive C has no label.<br>
         Volume Serial Number is XXXX-XXXX<br>
         Directory of C:\<br>
        <br>
        05/20/2024  10:00 AM    &lt;DIR&gt;          . <br>
        05/20/2024  10:00 AM    &lt;DIR&gt;          .. <br>
        01/15/2024  11:20 AM              1234 example.txt <br>
             1 File(s)          1234 bytes <br>
             2 Dir(s)      123456789 bytes free<br>
        </code>
    </pre>
</p>

Browser Support

The <tt> tag is supported by all major browsers, but as it is deprecated, its support might be removed in future browser versions. Therefore, it's best practice to avoid using it.

Notes and Tips

• Deprecated: The <tt> tag is deprecated and should not be used in new HTML documents.
• Use CSS Instead: For monospaced text, use CSS properties such as font-family: monospace; applied to appropriate tags like <pre> or <code>.
• Semantic Alternatives: Use the <code> tag for code snippets and <pre> for preformatted text, and use CSS to style them for visual presentation.
• Consistency: Ensure your website has a consistent way of presenting monospaced text by setting up proper CSS styles. This will improve the overall maintainability and professional look of your website.
• Accessibility: Always prioritize semantic HTML elements and CSS styling over deprecated elements, ensuring better accessibility and SEO.