Elemento HTML `<pre>`: texto preformateado

Baseline

Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.

See full compatibility
Learn more

El elemento <pre> de HTML representa texto preformateado que debe presentarse exactamente como está escrito en el archivo HTML. El texto normalmente se renderiza con una fuente no proporcional, o monoespaciada.

Los espacios en blanco dentro de este elemento se muestran tal como están escritos, con una excepción. Si se incluyen uno o más caracteres de salto de línea iniciales inmediatamente después de la etiqueta de apertura <pre>, el primer carácter de salto de línea se elimina. Esta transformación la realiza el analizador HTML y no se aplica cuando usas XHTML.

El contenido de texto de los elementos <pre> se analiza como HTML, así que si quieres asegurarte de que tu contenido se mantenga como texto sin formato, puede que algunos caracteres de sintaxis, como <, deban escaparse usando sus respectivas referencias de caracteres. Consulta escapar caracteres ambiguos para más información.

Los elementos <pre> suelen contener elementos <code>, <samp> y <kbd>, para representar código de computadora, salida de computadora y entrada del usuario, respectivamente.

Por defecto, <pre> es un elemento de nivel de bloque, es decir, su valor predeterminado de display es block.

Pruébalo

<pre>
             S
             A
            LUT
             M
            O N
            D  E
            DONT
          JE SUIS
          LA  LAN
          G U E  É
         L O Q U E N
        TE      QUESA
       B  O  U  C  H  E
      O        P A R I S
     T I R E   ET   TIRERA
    T O U             JOURS
   AUX                  A  L
 LEM                      ANDS   - Apollinaire
</pre>

pre {
  font-size: 0.7rem;
  margin: 0;
}

Atributos

Este elemento solo incluye los atributos globales.

width: Contiene el número preferido de caracteres que debería tener una línea. Aunque técnicamente todavía está implementado, este atributo no tiene efecto visual; para lograr ese efecto, usa CSS width en su lugar.
wrap: Es una sugerencia que indica cómo debe manejarse el desbordamiento. En los navegadores modernos esta sugerencia se ignora y no produce ningún efecto visual; para lograr ese efecto, usa CSS white-space en su lugar.

Accesibilidad

Es importante proporcionar una descripción alternativa para cualquier imagen o diagrama creado usando texto preformateado. La descripción alternativa debe describir clara y concisamente el contenido de la imagen o diagrama.

Las personas con condiciones de baja visión que navegan con la ayuda de tecnología de asistencia como un lector de pantalla pueden no entender qué representan los caracteres del texto preformateado cuando se leen en secuencia.

Una combinación de los elementos <figure> y <figcaption>, junto con los atributos ARIA role y aria-label en el elemento pre, permiten que el arte ASCII preformateado se anuncie como una imagen con texto alternativo, y que figcaption sirva como el pie de foto de la imagen.

Ejemplo

html

<figure>
  <pre role="img" aria-label="VACA ASCII">
      ___________________________
  &lt; I'm an expert in my field. &gt;
      ---------------------------
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
  </pre>
  <figcaption id="cow-caption">
    Una vaca diciendo: «I'm an expert in my field.». La vaca está dibujada con
    caracteres de texto preformateado.
  </figcaption>
</figure>

Ejemplos

Ejemplo básico

HTML

html

<p>Usar CSS para cambiar el color de la fuente es fácil.</p>
<pre><code>
body {
  color: red;
}
</code></pre>

Resultado

Escapar caracteres ambiguos

Supongamos que quieres mostrar código HTML dentro de un elemento <pre>. Las secuencias de caracteres que definen etiquetas HTML válidas (que empiezan con < y terminan con >) no se mostrarán. Para mostrar los caracteres de la etiqueta como texto, necesitas escapar (al menos) el carácter < usando su referencia de carácter correspondiente, de modo que las secuencias ya no definan etiquetas válidas.

En la práctica, el analizador HTML trata a la mayoría de los caracteres como texto plano salvo en contextos específicos. Por ejemplo, < code está bien, pero <code se interpretaría mal; &am; está bien, pero & no. Sin embargo, es una buena práctica escapar todos los caracteres ambiguos para evitar confusiones, especialmente si estás generando HTML de forma programática e inyectando el contenido de <pre>. En ese caso, esta es una buena regla general para escapar caracteres:

Primero, escribe el contenido tal como quieres que aparezca en el documento HTML.
Reemplaza los ampersands (&) por &. Haz este paso primero, para que los nuevos caracteres & generados en el siguiente paso no se escapen también.
Reemplaza los caracteres < por <.

Esto debería lograr que el contenido se muestre como pretendías. El reemplazo de otros caracteres de sintaxis HTML es opcional (como > por >, " por ", y ' por '), pero no hace daño.

HTML

html

<pre><code>
let i = 5;

if (i &lt; 10 &amp;&amp; i &gt; 0)
  return &quot;Single Digit Number&quot;
</code></pre>

Resultado

Resumen técnico

Categorías de contenido	Contenido de flujo, contenido palpable.
Contenido permitido	Contenido de redacción.
Omisión de etiqueta	Ninguna, tanto la etiqueta inicial como la final son obligatorias.
Elementos padres permitidos	Cualquier elemento que acepte contenido de flujo.
Rol ARIA implícito	`generic`
Roles ARIA permitidos	Cualquiera
Interfaz DOM	`HTMLPreElement`