Etiqueta pre en HTML: texto preformateado y bloques
La etiqueta <pre> en HTML representa un bloque de texto preformateado: con su presentación predeterminada conserva los espacios y los saltos de línea porque forman parte del contenido. Úsala para mostrar una configuración con indentación, un fragmento de código o un texto cuya distribución importa. Así puedes mantener dos espacios al principio de una línea sin que se reduzcan a uno al mostrarla.
Ejemplo mínimo de pre
<pre><code><p>Hola</p>
<p>Adiós</p></code></pre>El navegador muestra dos líneas, <p>Hola</p> y <p>Adiós</p>, con las etiquetas visibles. No genera los párrafos de la muestra: las referencias < y > producen los signos < y > como texto.
Para probarlo, pega el fragmento dentro del <body> de un documento HTML con codificación UTF-8, guarda el archivo y ábrelo en el navegador. Si añades dos espacios delante de la segunda línea, se conservarán. Si retiras solo <pre> y </pre>, dejando <code>, el salto y los espacios se reducirán con los estilos predeterminados; las etiquetas seguirán siendo texto porque continúan escapadas.
Sintaxis y contexto válido
Escribe una apertura <pre> y un cierre </pre>: ninguno se puede omitir. Puedes colocarlo donde se admita contenido de flujo, por ejemplo dentro de <body>, <main> o un elemento de lista. Su interior admite contenido de frase, como texto, <code> o <samp>; no admite párrafos, listas ni contenedores <div>. Tampoco coloques un bloque <pre> dentro de <p>.
El HTML Living Standard define el modelo de contenido de pre. La conservación visual del formato puede cambiar con CSS; no convierte al elemento en una tabla ni en un contenedor para maquetar toda la página.
El primer salto de línea tiene una excepción
En la sintaxis HTML, el analizador elimina un salto de línea inmediatamente después de <pre>:
<pre>
Primera línea
Segunda línea</pre>El resultado empieza en «Primera línea», sin una línea vacía inicial, y conserva los dos espacios de la segunda. Si escribes dos saltos consecutivos tras la apertura, se elimina el primero y queda una línea vacía. La excepción no elimina la indentación del resto del texto.
En <pre><code> el salto que escribas después de <code> ya no está inmediatamente después de <pre> y se conserva. Para evitar una línea vacía accidental, empieza el texto junto a la apertura de <code>, como en el ejemplo mínimo. También evita indentar toda la muestra solo para alinear el archivo HTML: esos espacios pueden aparecer en el resultado.
Pre con code: formato y significado
<pre> conserva una distribución; <code> identifica código informático. Para mostrar código de varias líneas, combínalos como <pre><code>…</code></pre>. Si quitas <code>, el formato permanece, pero el contenido pierde ese significado. Para mencionar una instrucción dentro de una frase, basta con code.
¿Pre muestra etiquetas sin interpretarlas?
No. El contenido sigue pasando por el analizador HTML: un <em> real crea énfasis y un script puede ejecutarse. <pre> y <code> no vuelven inerte el marcado. Para mostrar HTML, sustituye < por < y los ampersands del texto por &; puedes escribir > como >. Para enseñar la cadena literal &, escribe &amp; en la página que la muestra. Consulta las referencias de caracteres del estándar.
Caso práctico: una configuración con una línea larga
Esta página muestra una configuración de ejemplo con indentación de dos espacios. Solo enseña el texto: no configura ningún programa ni necesita un servidor, JavaScript o archivos adicionales.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Configuración de un taller</title>
<style>
body {
max-width: 48rem;
margin: 1rem auto;
padding: 0 1rem;
font-family: system-ui, sans-serif;
}
.configuracion {
padding: 1rem;
white-space: pre;
overflow-x: auto;
background: #f2f4f8;
color: #1f2937;
}
.configuracion:focus-visible {
outline: 2px solid #1d4ed8;
outline-offset: 2px;
}
.configuracion code {
font-family: monospace;
}
</style>
</head>
<body>
<h1 id="titulo-configuracion">Configuración del taller</h1>
<p>Las opciones de sitio llevan dos espacios; las de menú, cuatro.</p>
<p>Enfoca el bloque con Tab y usa las flechas si necesitas desplazarte.</p>
<pre class="configuracion" tabindex="0" role="region" aria-labelledby="titulo-configuracion"><code>sitio:
titulo: Taller de HTML
menu:
- inicio
- ejercicios
descripcion: "Un taller para aprender a escribir documentos HTML, revisar sus etiquetas y practicar con ejemplos completos en el navegador."</code></pre>
</body>
</html>Guárdalo en UTF-8 como configuracion-pre.html y ábrelo. Verás seis líneas; las dos entradas del menú tendrán cuatro espacios delante. La descripción larga permanece en una sola línea del texto y se puede consultar desplazando el bloque, incluso en una pantalla estrecha.
Para comprobarlo, reduce la ventana a unos 375 píxeles. Pulsa Tab hasta enfocar la región y utiliza las flechas izquierda y derecha: el bloque debe desplazarse horizontalmente sin ensanchar toda la página. Selecciona sus seis líneas, cópialas y pégalas en un editor de texto; verifica los saltos, los espacios y la descripción completa. No hay un botón de copia ni código que modifique la selección.
Saltos, espacios y ancho móvil
white-space: pre conserva espacios y saltos del texto, sin ajustar automáticamente las líneas al ancho disponible. overflow-x: auto permite consultar lo que exceda el bloque. Si retiras esta última regla, una línea larga puede desbordar su caja; overflow-x: hidden ocultaría parte del contenido sin ofrecer desplazamiento.
Si prefieres el ajuste visual, cambia a white-space: pre-wrap: conserva los espacios y saltos escritos, y permite partir visualmente las líneas al llegar al borde. Esas divisiones visuales no añaden saltos al texto original. Una cadena larga sin oportunidades de corte puede necesitar además overflow-wrap: anywhere. Con white-space: normal, en cambio, se reducen los espacios y los saltos: el elemento mantiene su significado, pero pierde la presentación que necesitas en este caso. Las referencias de white-space y overflow-x detallan estas diferencias.
Atributos, accesibilidad y errores habituales
<pre> no tiene atributos específicos vigentes. Entre los atributos globales, class permite seleccionar el bloque con CSS, id identificarlo y lang declarar el idioma humano del texto, no el lenguaje de programación. No uses los antiguos atributos width o wrap; controla la presentación con CSS. white-space y overflow-x son propiedades CSS, y textContent es una propiedad DOM utilizada desde JavaScript, no un atributo de <pre>.
En el caso práctico, tabindex="0" permite enfocar la zona de desplazamiento. role="region" y aria-labelledby le dan un nombre a esa zona; el contorno muestra el foco. No necesitas convertir cada bloque corto en una región: aquí se justifica por el desplazamiento y las instrucciones de teclado.
Un dibujo ASCII puede perder su sentido al leerse carácter por carácter. Acompáñalo de una descripción que explique su contenido o sus relaciones: para un esquema «Inicio → formulario → confirmación», escribe también el orden en una frase. No confíes solo en espacios para explicar una imagen ni para construir columnas de datos o la estructura de una página.
¿Pre y code son lo mismo?
No: formato preservado frente a significado de código. Usa <pre><samp>…</samp></pre> para una salida de programa con samp de varias líneas. Para prosa corriente, emplea párrafos con p; no recurras a <pre> solo para conseguir una fuente monoespaciada, que puedes aplicar con CSS.
Compatibilidad y fuentes
<pre> está ampliamente disponible en los navegadores actuales. La referencia de MDN sobre pre, consultada el 3 de octubre de 2026, documenta su compatibilidad, el salto inicial y las alternativas para arte ASCII. El estándar de code permite distinguir su significado del formato. Revisa también el CSS aplicado al bloque: una regla de tu sitio puede cambiar su apariencia aunque el elemento sea compatible.