Los elementos de preformateado se utilizan para representar bloques de texto plano en los que el texto aparece sin formato y cuya fuente tiene un ancho constante, como si se tratara del bloc de notas o un editor de código. Además, preservan los espacios múltiples, los saltos de línea y las tabulaciones. El texto debe ir entre las etiquetas <pre> (de apertura) y </pre> (de cierre). Por ejemplo:
<pre>
a
b
c
d</pre>
El código anterior se verá de la siguiente manera:
a
b
c
d Como se puede ver en el ejemplo anterior, los navegadores no aplican saltos de línea automáticos en el texto que hay dentro de las etiquetas <pre> y </pre> como sí sucede en el caso de los párrafos. También preservan los múltiples espacios consecutivos, sin tener que usar la entidad reiteradamente.
La fuente por defecto de los elementos preformateados tiene un ancho constante, y esto es muy útil a la hora de mostrar código de lenguajes de programación, arte ASCII o texto plano. Este elemento se usa muchas veces en combinación con otros elementos, como es el caso de <code>.
En el ejemplo siguiente, usamos una combinación de <pre> y <code> para mostrar una función recursiva en JavaScript que calcula el valor de una determinada posición de la sucesión de Fibonacci. Así lo indicamos en HTML:
<pre>
<code>
var n = 15;
function fibonacci(n) {
if (n < 2) {
return n;
} else {
return fibonacci(n-1) + fibonacci(n-2);
}
}
</code>
</pre>
Y este es el resultado:
var n = 15;
function fibonacci(n) {
if (n < 2) {
return n;
} else {
return fibonacci(n-1) + fibonacci(n-2);
}
}
En este código se observa la preservación de los espacios en blanco, el sangrado del texto —que es siempre muy importante en programación— y los saltos de línea. Además, con la ayuda del elemento <code> aparece la sintaxis coloreada, facilitando la lectura del código que contiene.
Si en su lugar hubiéramos usado un párrafo, el resultado habría sido muy distinto, ya que se ignorarían los espacios consecutivos, las tabulaciones y los saltos de línea. Se vería todo junto, dificultando mucho su lectura. Este sería el resultado:
var n = 15; function fibonacci(n) { if (n < 2) { return n; } else { return fibonacci(n-1) + fibonacci(n-2); } }
El elemento <pre> para el preformateado del texto permite utilizar los atributos globales, de los que forman parte los atributos esenciales (id, class y title), los de idioma (lang y xml:lang), los de estilos (style) y los de eventos.
