Etiqueta HTML <tt>
La etiqueta HTML <tt> es obsoleta y fue eliminada de HTML5. Aprende qué etiquetas modernas y CSS usar en su lugar para texto monoespaciado.
La etiqueta <tt> (teletipo) es obsoleta y fue eliminada de HTML5 — no la uses. Antes renderizaba texto en línea con una fuente monoespaciada de ancho fijo, tal como aparecería en un teletipo o máquina de escribir. Los navegadores modernos aún pueden mostrarla, pero no tiene significado semántico y no es HTML válido. Usa en su lugar un elemento semántico o CSS.
<tt> es una etiqueta HTML obsoleta. Se incluye únicamente como referencia. Los documentos nuevos no deben utilizarla.
Los términos monotipo, monoespaciado y no proporcional son intercambiables: todos describen una tipografía cuyos caracteres ocupan el mismo ancho horizontal, de modo que las columnas de texto quedan alineadas.
Qué usar en lugar de <tt>
<tt> era puramente presentacional — no indicaba por qué el texto estaba en monoespaciado. HTML5 la reemplaza con elementos que aportan significado, más CSS para los casos excepcionales en que solo se desea el aspecto monoespaciado.
| Quieres marcar… | Usa | Ejemplo |
|---|---|---|
| Código fuente, una etiqueta, un comando | <code> | <code>git commit</code> |
| Entrada de teclado que el usuario debe escribir | <kbd> | <kbd>Ctrl</kbd> |
| Salida producida por un programa | <samp> | <samp>Build passed</samp> |
| El nombre de una variable o marcador de posición | <var> | <var>filename</var> |
| Monoespaciado únicamente para presentación | una clase CSS con font-family: monospace | ver más abajo |
<pre> no es un reemplazo directo: la etiqueta <pre> preserva los espacios en blanco y los saltos de línea (texto preformateado). Se refiere al diseño, no al significado del texto, y suele combinarse con <code> para bloques de código.
Elegir el elemento correcto
- Usa un elemento semántico (
<code>,<kbd>,<samp>,<var>) siempre que el texto signifique algo — esto mejora la accesibilidad y te permite aplicar estilos distintos a cada tipo. Los cuatro se renderizan con una fuente monoespaciada por defecto. - Usa CSS solo cuando quieras el aspecto monoespaciado sin ningún significado especial. Aplícalo mediante una clase o una regla
<style>, no con un atributostyleen línea, para que la presentación permanezca en tu hoja de estilos.
Reemplazos semánticos en uso
Este ejemplo muestra <code>, <kbd> y <samp> trabajando juntos en una instrucción 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 monoespaciado únicamente para presentación
Cuando solo necesitas el aspecto monoespaciado — sin ningún significado semántico — define una clase en CSS en lugar de usar <tt> o un estilo en línea:
<!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>Consulta la propiedad CSS font-family para más información sobre pilas de fuentes.
Sintaxis heredada de <tt> (no usar)
Solo como referencia, el elemento obsoleto <tt> se escribía como un par de etiquetas con el contenido entre ellas:
<!-- 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>