O elemento “tt” está obsoleto. Use CSS em vez disso.

O elemento <tt> era um elemento puramente apresentacional — descrevia como o texto deveria parecer (monoespaçado) em vez de o que o texto significava. O HTML5 removeu-o como parte de um esforço mais amplo para separar conteúdo de apresentação. Os navegadores ainda renderizam <tt> para compatibilidade com versões anteriores, mas os validadores irão sinalizá-lo como obsoleto, e o seu uso é desencorajado em todo o código novo.

A questão principal é que <tt> era usado para muitos propósitos diferentes — mostrar fragmentos de código, entrada de teclado, saída de exemplo, variáveis, nomes de ficheiros, e mais — mas não transmitia nenhum desse significado a tecnologias assistivas ou motores de busca. O HTML5 fornece elementos semânticos dedicados para a maioria destes casos de uso, tornando o seu conteúdo mais significativo e acessível.

Escolher a substituição correta

Antes de recorrer a um <span> genérico, considere o que o texto monoespaçado realmente representa:

• Código: Use <code> para fragmentos de código inline (por exemplo, nomes de variáveis, declarações curtas).
• Entrada de teclado: Use <kbd> para texto que o utilizador deve digitar.
• Saída de exemplo: Use <samp> para saída de um programa ou sistema.
• Variáveis: Use <var> para variáveis matemáticas ou de programação.
• Sem significado semântico: Use um <span> com CSS quando o estilo monoespaçado é puramente visual e nenhum dos elementos acima se aplica.

Todos estes elementos são renderizados numa fonte monoespaçada por padrão na maioria dos navegadores (exceto <var>, que é tipicamente itálico). Pode estilizá-los adicionalmente com CSS conforme necessário.

Exemplos

❌ Uso obsoleto com <tt>

<p>Execute o comando <tt>npm install</tt> para instalar dependências.</p>
<p>A variável <tt>x</tt> contém o resultado.</p>
<p>A saída foi <tt>Hello, world!</tt></p>

Todos estes desencadeiam o erro do validador: The “tt” element is obsolete. Use CSS instead.

✅ Corrigido com elementos semânticos

<p>Execute o comando <kbd>npm install</kbd> para instalar dependências.</p>
<p>A variável <var>x</var> contém o resultado.</p>
<p>A saída foi <samp>Hello, world!</samp></p>

Cada substituição transmite o significado do texto. <kbd> informa às tecnologias assistivas que isto é algo que o utilizador digita, <var> marca uma variável, e <samp> indica saída de programa.

✅ Corrigido com <code> para código inline

<p>Use o método <code>Array.prototype.map()</code> para transformar cada elemento.</p>

✅ Corrigido com <span> e CSS quando nenhum elemento semântico se adequa

Se o texto monoespaçado não representa código, entrada, saída, ou uma variável — por exemplo, uma escolha estilística para um nome de ficheiro ou uma decisão de design arbitrária — use um <span> com CSS:

<p>Edite o ficheiro <span class="mono">config.yaml</span> para alterar as definições.</p>

.mono {
  font-family: monospace;
}

Isto mantém o seu HTML válido e o seu estilo na camada CSS onde pertence.

✅ Código em bloco com <pre> e <code>

Se anteriormente usou <tt> dentro de um bloco <pre> para código de múltiplas linhas, a abordagem padrão é combinar <pre> com <code>:

<pre><code>function greet(name) {
  return "Hello, " + name;
}</code></pre>

Resumo

Substitua todos os elementos <tt> pelo elemento HTML semântico que melhor descreva o seu conteúdo — <code>, <kbd>, <samp>, ou <var>. Se nenhum destes se adequar, use um <span> estilizado com font-family: monospace no CSS. Isto mantém a sua marcação válida, significativa e acessível.

Saiba mais:

MDN Reference

MDN: font-family

→