Etiqueta PRE

Etiquetas:

A veces simplemente queremos mantener el formato fiel a como lo escribimos, o no queremos que se interpreten textos de forma inesperada, para esto, lo mejor que podemos usar en HTML es la etiqueta <pre>.

Vamos a ver un ejemplo muy rápido antes de comenzar:

<p> Lorem Ipsum,
Lorem        Ipsum,
Lorem Ipsum Lorem Ipsum.
</p>

En este caso estamos usando la etiqueta de párrafo. Esta etiqueta no interpreta saltos de linea ni espacios sobrantes, el resultado será este:

Lorem Ipsum, Lorem Ipsum, Lorem Ipsum Lorem Ipsum.

Sin embargo, si utilizamos el siguiente código:

<pre> Lorem Ipsum,
Lorem        Ipsum,
Lorem Ipsum Lorem Ipsum.
</pre>

Pre va a interpretar el texto en formato crudo y este va a ser el resultado:

Lorem Ipsum,
Lorem        Ipsum,
Lorem Ipsum Lorem Ipsum.

Además, podremos apreciar que Pre pone una fuente y tamaño diferentes al resto del cuerpo de la página. Esto es porque viene incluido con un CSS personalizado que puede ser modificado en el <head> (o usando el atributo style u otro metodo). Este es el CSS que viene por defecto:

pre {
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0;
}

Ver también: Clases en HTML (cuando haya posterior entrada la hipervinculo).

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *