Validación HTML: El elemento "tt" está obsoleto. Usa CSS en su lugar.

Acerca de este problema HTML

El elemento <tt> era un elemento puramente presentacional — describía cómo debería verse el texto (monoespaciado) en lugar de qué significaba el texto. HTML5 lo eliminó como parte de un esfuerzo más amplio para separar el contenido de la presentación. Los navegadores aún renderizan <tt> por compatibilidad hacia atrás, pero los validadores lo marcarán como obsoleto, y su uso está desaconsejado en todo código nuevo.

El problema clave es que <tt> se usaba para muchos propósitos diferentes — mostrar fragmentos de código, entrada de teclado, salida de muestra, variables, nombres de archivos y más — pero no transmitía nada de ese significado a las tecnologías asistivas o motores de búsqueda. HTML5 proporciona elementos semánticos dedicados para la mayoría de estos casos de uso, haciendo tu contenido más significativo y accesible.

Eligiendo el reemplazo correcto

Antes de recurrir a un  genérico, considera qué representa realmente el texto monoespaciado:

Código: Usa <code> para fragmentos de código en línea (ej., nombres de variables, declaraciones cortas).
Entrada de teclado: Usa <kbd> para texto que el usuario debería escribir.
Salida de muestra: Usa <samp> para salida de un programa o sistema.
Variables: Usa <var> para variables matemáticas o de programación.
Sin significado semántico: Usa un  con CSS cuando el estilo monoespaciado sea puramente visual y ninguno de los elementos anteriores aplique.

Todos estos elementos se renderizan con una fuente monoespaciada por defecto en la mayoría de navegadores (excepto <var>, que típicamente es cursiva). Puedes estilizarlos adicionalmente con CSS según sea necesario.

Ejemplos

❌ Uso obsoleto con `<tt>`

<p>Ejecuta el comando <tt>npm install</tt> para instalar dependencias.</p>
<p>La variable <tt>x</tt> contiene el resultado.</p>
<p>La salida fue <tt>Hello, world!</tt></p>

Todos estos provocan el error del validador: El elemento “tt” está obsoleto. Usa CSS en su lugar.

✅ Corregido con elementos semánticos

<p>Ejecuta el comando <kbd>npm install</kbd> para instalar dependencias.</p>
<p>La variable <var>x</var> contiene el resultado.</p>
<p>La salida fue <samp>Hello, world!</samp></p>

Cada reemplazo transmite el significado del texto. <kbd> le dice a las tecnologías asistivas que esto es algo que el usuario escribe, <var> marca una variable, y <samp> indica salida de programa.

✅ Corregido con `<code>` para código en línea

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

✅ Corregido con un `` y CSS cuando no encaja ningún elemento semántico

Si el texto monoespaciado no representa código, entrada, salida o una variable — por ejemplo, una elección estilística para un nombre de archivo o una decisión de diseño arbitraria — usa un  con CSS:

<p>Edita el archivo <span class="mono">config.yaml</span> para cambiar la configuración.</p>

.mono {
  font-family: monospace;
}

Esto mantiene tu HTML válido y tu estilo en la capa CSS donde pertenece.

✅ Código a nivel de bloque con `<pre>` y `<code>`

Si anteriormente usabas <tt> dentro de un bloque <pre> para código de múltiples líneas, el enfoque estándar es combinar <pre> con <code>:

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

Resumen

Reemplaza cada elemento <tt> con el elemento HTML semántico que mejor describa su contenido — <code>, <kbd>, <samp>, o <var>. Si ninguno de estos encaja, usa un  estilizado con font-family: monospace en CSS. Esto mantiene tu marcado válido, significativo y accesible.