La etiqueta pre: texto preformateado

En esta entrada probamos el arte ASCII e intentamos dibujar un gatito. Pero no sale bien: el código se ve distinto en el editor HTML y en el mininavegador. Puedes escribir muchos espacios seguidos en HTML, pero el navegador los mostrará como uno solo. Lo mismo ocurre con los saltos de línea: no se conservan al mostrar la página.

Para cambiar este comportamiento existe <pre>, de «preformatted text», que marca texto preformateado. Se usa sobre todo para mostrar ejemplos de código y, a veces, dibujos de arte ASCII. El navegador conserva y muestra los espacios y saltos de línea que hay dentro de <pre>.

<pre>Ejemplo
                de texto preformateado
        que conserva     los espacios
                     y los saltos de línea</pre>

Así se ve en el navegador:

Ejemplo
                de texto preformateado
        que conserva     los espacios
                     y los saltos de línea

Agregamos algunos estilos de fuente y color para mejorar el aspecto de <pre>. Puedes verlos en la pestaña style.css.