La Etiqueta PRE

Se utiliza para mostrar texto conservando su formato original, como espacios, saltos de línea y tabulaciones. Es ideal para representar código, poemas, o cualquier contenido donde la estructura sea crítica.

La etiqueta <pre> en HTML (abreviatura de "preformatted text") se utiliza para mostrar texto conservando su formato original, como espacios, saltos de línea y tabulaciones. Es ideal para representar código, poemas, o cualquier contenido donde la estructura sea crítica. A continuación, te explicamos cómo usarla correctamente.

Sintaxis básica

La estructura básica es:

<pre>
   Tu texto aquí,
   con espacios    y saltos
   preservados.
</pre>

Ejemplo:

<pre>
   Hola,
   Este texto mantendrá  los   espacios.
   ¡Incluso los saltos de línea!
</pre>

Características clave

  • Conserva el formato: Ignora las reglas de HTML que eliminan espacios extras o saltos de línea.

  • Fuente monoespaciada: El texto se muestra en una fuente como Courier New por defecto.

  • Bloque de nivel: Ocupa todo el ancho disponible y crea un salto de línea antes y después.

Casos de uso comunes

Mostrar código

<pre>
   function saludar() {
      console.log("¡Hola, mundo!");
   }
</pre>

Poesía o texto estructurado

<pre>
   En un lugar de la Mancha,
   de cuyo nombre no quiero acordarme...
                  - Miguel de Cervantes
</pre>

ASCII Art

<pre>
   (\_/)
   ( •_•)
   />????
</pre>

Escapar caracteres especiales

Si necesitas mostrar símbolos como <, >, o &, debes reemplazarlos por sus entidades HTML:

  • < → &lt;

  • > → &gt;

  • & → &amp;

Ejemplo:

<pre>
   &lt;div&gt;Esto es un div&lt;/div&gt;
</pre>

Combinar con <code> para mejor semántica

Para código, se recomienda anidar <code> dentro de <pre>:

<pre><code>
   let numero = 42;
   console.log(numero);
</code></pre>

Esto mejora la accesibilidad y ayuda a los motores de búsqueda a identificar código.

Personalizar con CSS

Puedes modificar el estilo predeterminado:

<pre style="background: #f0f0f0; padding: 10px; border-radius: 5px; overflow-x: auto;">
   Texto con fondo gris y scroll horizontal si es necesario.
</pre>

Propiedades útiles:

  • overflow-x: auto: Añade scroll horizontal si el contenido es muy ancho.

  • font-family: Cambia la fuente (ej: "Consolas", monospace).

  • white-space: pre-wrap: Permite saltos de línea automáticos si el texto es largo.

Buenas prácticas

  • Úsalo solo cuando el formato sea esencial (evítalo para texto normal).

  • Escapa caracteres especiales si incluyes etiquetas HTML.

  • Combínalo con <code> para bloques de código.

Ejemplo completo

<!DOCTYPE html>
<html>
<head>
   <title>Ejemplo de &lt;pre&gt;</title>
   <style>
      pre {
         background: #f8f8f8;
         padding: 15px;
         border-left: 3px solid #007bff;
         font-family: "Consolas", monospace;
      }
   </style>
</head>
<body>
   <h2>Código en JavaScript</h2>
   <pre><code>
      function suma(a, b) {
         return a + b;
      }
      console.log(suma(2, 3)); // Resultado: 5
   </code></pre>
</body>
</html>

Conclusión

La etiqueta <pre> es una herramienta poderosa para mostrar contenido preformateado en HTML. Ya sea código, texto artístico o datos estructurados, su uso garantiza que la presentación se mantenga fiel al original. ¡Experimenta con ella y aprovecha su potencial en tus proyectos web!