Etiqueta HTML <pre>
Usa la etiqueta <pre> para definir texto preformateado, que se presenta exactamente como está escrito en el archivo HTML.
La etiqueta HTML <pre> define texto preformateado — texto que se renderiza exactamente como está escrito en el código fuente, con todos los espacios y saltos de línea conservados. Los navegadores muestran el contenido de un elemento <pre> con una fuente de ancho fijo (monoespaciada). Se usa con mayor frecuencia para mostrar código fuente (generalmente junto con la etiqueta <code>) o cualquier texto donde el autor controla el diseño exacto de las líneas, como un poema o arte ASCII.
Por qué <pre> conserva los espacios en blanco
Por defecto, los navegadores colapsan los espacios en blanco: una secuencia de espacios, tabulaciones y saltos de línea se renderiza como un único espacio, y los saltos de línea en el HTML no tienen efecto visual. Por eso escribir varios espacios o presionar Enter dentro de un párrafo normal no cambia cómo se ve el texto.
El elemento <pre> omite ese comportamiento. Dentro de él, cada espacio, tabulación y salto de línea es significativo y se muestra literalmente — no es necesario usar ni <br> para controlar el espaciado. Internamente, esto equivale a aplicar la declaración CSS white-space: pre, que es el estilo por defecto que los navegadores asignan a <pre>.
Usa <pre> siempre que el orden exacto de los caracteres importe: listados de código, salida de línea de comandos, texto sin formato en forma de tabla o arte creado con caracteres.
Sintaxis
La etiqueta <pre> va en pares. El contenido se escribe entre las etiquetas de apertura (<pre>) y de cierre (</pre>). Ten en cuenta que el texto generalmente comienza en la línea siguiente a la etiqueta de apertura, y cualquier sangría que agregues dentro del código fuente aparecerá en la salida.
Los elementos en línea se colocan típicamente dentro de la etiqueta <pre>. Aunque los elementos de bloque están permitidos en HTML5, pueden introducir espacios en blanco o sangría inesperados, por lo que generalmente se prefieren los elementos en línea.
Ejemplo de la etiqueta HTML <pre>
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
</head>
<body>
<pre>Spaces
and line breaks
within this element
are shown as typed.
</pre>
</body>
</html>Resultado
El patrón <pre><code> para bloques de código
La forma canónica y accesible de mostrar un bloque de código fuente es anidar un elemento <code> dentro de un elemento <pre>:
<pre>proporciona el diseño en bloque y conserva los espacios en blanco y los saltos de línea.<code>añade la semántica: marca el contenido como código de computadora en lugar de texto ordinario.
Juntos le indican a los motores de búsqueda y a las tecnologías de asistencia exactamente qué es el contenido. Los lectores de pantalla pueden anunciarlo como una región de código, y las bibliotecas de resaltado de sintaxis (Prism, highlight.js, etc.) apuntan al selector pre > code para colorear el marcado. Usar <pre> solo mantendría el formato pero perdería ese significado, por lo que la combinación es el patrón recomendado.
Ejemplo de la etiqueta HTML <pre> con el elemento <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre><code>body {
color: orange;
}</code></pre>
</body>
</html>El espacio en blanco dentro de <pre> es literal, así que coloca la etiqueta de cierre </pre> justo pegada al código (como se muestra arriba). Los saltos de línea iniciales y la sangría entre <pre> y <code> se renderizan, por eso el código fuente muy sangrado puede mostrar líneas en blanco no deseadas y espacios iniciales.
Escapar <, > y & dentro de <pre>
<pre> conserva los espacios en blanco, pero no desactiva el análisis HTML. El navegador sigue leyendo su contenido como marcado. Por lo tanto, si deseas mostrar HTML literal o cualquier contenido que contenga los caracteres <, > o &, debes escaparlos con entidades HTML — de lo contrario, el navegador intentará interpretarlos como etiquetas:
| Carácter | Entidad |
|---|---|
< | < |
> | > |
& | & |
Por ejemplo, para mostrar el texto <p>Hello & welcome</p> debes escribir:
<pre><code><p>Hello & welcome</p></code></pre>La página entonces muestra los corchetes angulares en lugar de renderizar un párrafo. Consulta la referencia Unicode de HTML para obtener la lista completa de entidades con nombre.
Estilizar <pre> y la propiedad white-space
Los navegadores estilizan <pre> con white-space: pre por defecto. Puedes cambiar cómo el texto preformateado hace saltos de línea usando la propiedad CSS white-space:
| Valor | Saltos de línea | Espacios / tabulaciones | Ajuste de línea |
|---|---|---|---|
pre | conservados | conservados | nunca ajusta (valor por defecto de <pre>) |
pre-wrap | conservados | conservados | ajusta cuando la línea es muy larga |
pre-line | conservados | colapsados | ajusta cuando la línea es muy larga |
Dado que pre nunca ajusta el texto, una línea larga de código desbordará su contenedor. La solución habitual es agregar una barra de desplazamiento horizontal con overflow-x: auto, lo que mantiene el formato original y permite al lector desplazarse horizontalmente:
pre {
background-color: #f4f4f4;
padding: 10px;
overflow-x: auto; /* horizontal scroll for long lines */
}Si prefieres que el texto pase a la siguiente línea en lugar de desplazarse, usa white-space: pre-wrap en su lugar.
Atributos
El elemento <pre> no tiene atributos obligatorios. Los atributos width, cols y wrap están obsoletos y fueron eliminados en HTML5 — usa CSS en su lugar:
| Atributo obsoleto | Qué hacía | Usa en su lugar |
|---|---|---|
width | sugería el ancho en caracteres | CSS max-width |
cols | sugería el número de columnas | CSS width / max-width |
wrap | controlaba el ajuste de línea | CSS white-space: pre-wrap |
La etiqueta <pre> admite los Atributos Globales y los Atributos de Evento.
Etiquetas relacionadas
<code>— marca un fragmento de código de computadora.<samp>— salida de muestra de un programa.<kbd>— entrada de teclado.- Elementos de código de computadora en HTML — descripción general de todas las etiquetas relacionadas con código.