Etiqueta tt en HTML: obsoleta y texto monoespaciado

La etiqueta <tt> está obsoleta y no debe utilizarse en páginas nuevas. Servía para mostrar texto en una fuente monoespaciada, por ejemplo una instrucción escrita para una terminal. Hoy se elige una etiqueta según el significado del texto, como <code>, <kbd> o <samp>, y CSS cuando solo interesa su apariencia. Esta guía permite reconocer código antiguo y migrarlo; el HTML Living Standard exige sustituir <tt> por elementos apropiados o CSS.

Ejemplo histórico para reconocer tt

Este bloque documenta la sintaxis antigua. No es una recomendación ni una demostración ejecutable:

<p>Escribe <tt>npm run build</tt>.</p>

Se pretendía mostrar npm run build con una fuente de ancho fijo dentro del párrafo. La descripción de HTML 4.01 relacionaba <tt> con la apariencia de un teletipo. No creaba una terminal, no aceptaba entrada del usuario y no ejecutaba el comando.

Si cambias el texto encerrado, cambia la instrucción visible. Si retiras <tt> y </tt> conservando el texto, este permanece y pierde la presentación propia del elemento, salvo que otras reglas CSS la mantengan. Al migrarlo a <kbd>, la instrucción pasa a estar marcada como entrada del usuario.

Sintaxis y contexto históricos

En la DTD de HTML 4.01, <tt>…</tt> requería apertura y cierre y admitía texto y elementos en línea. Podía aparecer en un párrafo, donde se permitía ese contenido. No era un contenedor para párrafos o tablas ni pertenecía a <head>.

No era un elemento vacío: <tt /> no lo cerraba en HTML. Estas reglas sirven para interpretar documentos antiguos; ningún contexto convierte su uso en conforme al HTML actual. HTML 4.01 aún lo incluía entre los estilos de texto; su obsolescencia actual se comprueba en el estándar vigente.

¿Tt y code son equivalentes?

No. <tt> definía presentación; las alternativas actuales expresan qué representa el texto. Elige por su función, aunque todas puedan verse con una fuente monoespaciada:

• <kbd> para una entrada del usuario, como una instrucción que debe escribir en la terminal. Así se migra el primer ejemplo.
• <code> para un fragmento de código, como una condición de un programa. No es el reemplazo automático de cualquier texto que antes usaba <tt>.
• <samp> para una muestra de salida de un programa o sistema, como un mensaje de finalización.

Son los significados definidos para kbd, code y samp. Cambiar su CSS no cambia esos significados.

¿Cómo aplico monoespaciado sin semántica de código?

Usa font-family: monospace en el elemento apropiado. Si necesitas agrupar solo un fragmento que no tiene otro significado especializado, emplea <span> con una clase. En el ejemplo siguiente, el número de una ficha impresa del taller solo recibe un tratamiento visual.

La familia genérica monospace de CSS selecciona una fuente de ancho fijo disponible en el entorno. Puedes indicar primero una fuente concreta y dejar monospace como respaldo; no necesitas descargar una fuente para este ejemplo.

Ejemplo completo de migración actual

Guarda el documento como texto-monoespaciado.html en UTF-8 y ábrelo en un navegador. Incluye todo el HTML y CSS necesario; no requiere servidor, archivos externos ni JavaScript.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Texto monoespaciado según su función</title>
    <style>
      body {
        margin: 0;
        padding: 1rem;
        font-family: system-ui, sans-serif;
        line-height: 1.6;
        color: #222222;
        background-color: #ffffff;
      }

      main {
        max-width: 65ch;
        margin-inline: auto;
      }

      code, kbd, samp, .identificador {
        font-family: "Courier New", monospace;
        font-size: 1em;
        overflow-wrap: anywhere;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Cuatro textos, cuatro propósitos</h1>
      <p>Instrucción para la terminal: escribe <kbd>npm run build</kbd>.</p>
      <p>Fragmento de código:
        <code>if (total &lt; limite &amp;&amp; listo) { guardar(); }</code>.
      </p>
      <p>Mensaje de salida ilustrativo: <samp>Construcción terminada</samp>.</p>
      <p>Ficha impresa del taller:
        <span class="identificador">TALLER-2026-0047</span>.
      </p>
    </main>
  </body>
</html>

Verás cuatro párrafos con sus fragmentos en fuente monoespaciada. La instrucción representa entrada; la condición, código; el mensaje, salida; y la ficha recibe únicamente un estilo. El mensaje es un dato escrito para la muestra, no el resultado real de ejecutar npm run build. El fragmento de código tampoco se ejecuta.

< y & permiten mostrar < y & como texto en el HTML. La condición visible será if (total < limite && listo) { guardar(); }. Los rótulos explican cada propósito sin depender de reconocer la tipografía o de que un lector de pantalla anuncie cada etiqueta de una forma concreta.

Atributos y propiedades: qué cambia al migrar

<tt> no tenía un atributo específico para elegir la fuente. Los atributos comunes como id, class y lang identificaban el elemento, asignaban clases o declaraban el idioma; no eran controles propios del monoespaciado. No añadas face, size o color como si pertenecieran a <tt>.

font-family es una propiedad CSS. Puede declararse en una regla, como en el ejemplo, o dentro del atributo global style. Desde JavaScript, element.style.fontFamily accede a la declaración de estilo en línea mediante CSSOM; no es un atributo específico de la etiqueta ni es necesario para esta migración.

Comprobaciones y errores frecuentes

1. Abre el archivo a anchura de móvil y escritorio. Comprueba la instrucción, los símbolos de la condición y los cuatro rótulos. overflow-wrap: anywhere permite partir un fragmento largo si falta espacio.
2. Desactiva JavaScript: todo el contenido debe seguir visible porque no utiliza scripts.
3. Retira la clase identificador: la ficha pierde su fuente monoespaciada. Retira todo el CSS: permanecen el texto, los rótulos y el significado de <kbd>, <code> y <samp>; su apariencia pasa a depender del navegador.
4. Retira esas tres etiquetas conservando sus textos: desaparece el significado que marcaban, aunque los rótulos siguen explicando la instrucción, el código y el mensaje.

¿El monoespaciado conserva espacios y saltos de línea? No por sí mismo. Una fuente de ancho fijo no evita el tratamiento normal de espacios en un párrafo. Para un bloque cuya estructura dependa de la indentación, usa <pre>, combinado con <code> si contiene código: el estándar distingue texto preformateado de su contenido. No uses <pre> únicamente para conseguir una fuente.

Compatibilidad y fuentes

Revisión de fuentes: 4 de octubre de 2026. MDN documenta <tt> como obsoleta, explica su presentación histórica y recomienda alternativas semánticas o CSS. Sus datos de compatibilidad siguen registrando soporte en Chrome, Firefox y Safari. Que un navegador todavía interprete el elemento no autoriza su uso en páginas nuevas; la norma aplicable sigue siendo la lista de funciones no conformes de WHATWG.

La migración usa elementos actuales y CSS sin una API experimental. La fuente concreta puede variar según las instaladas y las preferencias del usuario; la familia genérica ofrece el respaldo. La elección semántica se mantiene aunque cambie la apariencia.