HTML <tt> Tag
A tag HTML <tt> é obsoleta e foi removida do HTML5. Saiba quais tags modernas e CSS usar para texto monoespaçado.
A tag <tt> (teletipo) é obsoleta e foi removida do HTML5 — não a utilize. Ela servia para renderizar texto inline em uma fonte monoespaçada de largura fixa, como apareceria em um teletipo ou máquina de escrever. Navegadores modernos ainda podem exibi-la, mas ela não tem significado semântico e não é HTML válido. Use um elemento semântico ou CSS em seu lugar.
<tt> é uma tag HTML descontinuada. Está listada apenas para referência. Novos documentos não devem utilizá-la.
Os termos monotipo, monoespaçado e não-proporcional são intercambiáveis: todos descrevem uma tipografia cujos caracteres ocupam a mesma largura horizontal, fazendo com que colunas de texto fiquem alinhadas.
O que usar no lugar de <tt>
<tt> era puramente apresentacional — não dizia nada sobre o motivo pelo qual o texto estava em monoespaçado. O HTML5 o substitui por elementos que carregam significado, além de CSS para os casos raros em que você quer apenas a aparência monoespaçada.
| Você quer marcar… | Use | Exemplo |
|---|---|---|
| Código-fonte, uma tag, um comando | <code> | <code>git commit</code> |
| Entrada de teclado que o usuário deve digitar | <kbd> | <kbd>Ctrl</kbd> |
| Saída produzida por um programa | <samp> | <samp>Build passed</samp> |
| O nome de uma variável ou de um espaço reservado | <var> | <var>filename</var> |
| Monoespaçado puramente para apresentação | uma classe CSS com font-family: monospace | veja abaixo |
<pre> não é uma substituição direta: a tag <pre> preserva espaços em branco e quebras de linha (texto pré-formatado). Ela diz respeito ao layout, não ao significado do texto, e é frequentemente combinada com <code> para blocos de código.
Escolhendo o elemento correto
- Use um elemento semântico (
<code>,<kbd>,<samp>,<var>) sempre que o texto significar algo — isso melhora a acessibilidade e permite estilizar cada tipo de forma diferente. Os quatro renderizam em uma fonte monoespaçada por padrão. - Use CSS somente quando você quiser a aparência monoespaçada sem nenhum significado especial. Aplique-o por meio de uma classe ou uma regra
<style>, não um atributostyleinline, para que a apresentação permaneça em sua folha de estilos.
Substituições semânticas em uso
Este exemplo mostra <code>, <kbd> e <samp> funcionando juntos em uma instrução realista:
<!DOCTYPE html>
<html>
<head>
<title>Replacing the tt tag</title>
</head>
<body>
<p>
Stage your changes with <kbd>git add .</kbd>, then run
<code>git commit -m "message"</code>.
</p>
<p>
On success Git prints <samp>1 file changed</samp>.
</p>
</body>
</html>CSS monoespaçado apenas para apresentação
Quando você só precisa da aparência monoespaçada — sem nenhum significado semântico — defina uma classe em CSS em vez de usar <tt> ou um estilo inline:
<!DOCTYPE html>
<html>
<head>
<title>Monospace text with CSS</title>
<style>
.mono {
font-family: monospace;
}
</style>
</head>
<body>
<p>This is an ordinary text.</p>
<p class="mono">And this is monospaced text.</p>
</body>
</html>Veja a propriedade CSS font-family para saber mais sobre pilhas de fontes.
Sintaxe legada de <tt> (não utilize)
Apenas para referência, o elemento obsoleto <tt> era escrito como um par de tags com o conteúdo entre elas:
<!-- Obsolete: removed from HTML5. Shown for reference only. -->
<p>This is an ordinary text.</p>
<p><tt>And this is a teletype text.</tt></p>