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).