Seguro alguna vez te has preguntado, ¿para qué sirve la etiqueta <pre>? Para preformatear texto, dice la especificación HTML del W3C. Su nombre, PRE significa literalmente “PREformateado”. Esta etiqueta se utiliza con tan poca frecuencia que pocos se molestan en buscarla. Pero, ¿qué es el texto preformateado?
Qué es la Etiqueta <pre>
El elemento HTML pre se utiliza para conservar el formato aplicado al texto antes de mostrarlo en el navegador, es decir, cuando el código se crea en el editor de texto.
Este elemento se utiliza generalmente para mostrar texto con un formato determinado o simplemente para mostrar ejemplos de código. Por ejemplo, puede utilizarse para mejorar la representación de una tabla de datos recuperada en PHP de una base de datos MySQL.
Si bien este elemento es útil en ocasiones, hay que tener cuidado de no utilizarlo abusivamente como sustituto de CSS, ya que es una mala práctica. Hay que recordar que, siempre que sea posible, hay que utilizar CSS en lugar de HTML para el formato.
Sintaxis
<pre> </pre>Atributos del Elemento <pre></pre>
El elemento pre no tiene atributos particulares. Soporta atributos universales como todos los elementos HTML.
Como recordatorio, los atributos universales o globales son atributos que pueden añadirse a todos los elementos HTML. Algunos ejemplos de atributos universales comunes: class, id, lang, style, title…
Ejemplos del Elemento PRE
Ejemplo de texto pre-formateado:
<h1>El Elemento HTML pre</h1>
<pre>Esto
es
preformateado =)</pre>
Esta etiqueta es ideal para mostrar código informático y sus sangrías. Pero al contrario de lo que se suele pensar, la etiqueta <pre> no sólo sirve para mostrar código… sino también arte ASCII o poesía. El código es poesía, ¿verdad?)
Ejemplo de código ASCII con Etiqueta <pre>:
EEEE J EEEE M M PPPP L OOO
E J E MM MM P P L O O
EEE J EEE M M M PPPP L O O
E J J E M M P L O O
EEEE JJJ EEEE M M P LLLL OOO A continuación, puedes notar que sin la etiqueta <pre>, lo anterior es incomprensible:
EEEE J EEEE M M PPPP L OOO
E J E MM MM P P L O O
EEE J EEE M M M PPPP L O O
E J J E M M P L O O
EEEE JJJ EEEE M M P LLLL OOO
Texto sin formato:
Es esencial para representar el texto sin formato de archivos o correos electrónicos, con los párrafos indicados por líneas en blanco, las listas por líneas precedidas de un guión, etc.
He aquí un ejemplo de tabla preformateada, como la que a veces escribimos rápidamente en un correo electrónico, simplemente añadiendo espacios:
Manzanas 1,5 kg Papaya 2,5 kg Mandarinas 1,5 kg Tomates 1,5 kg Ajo 750 g Cebolla 500 g
Marcado ligero
Es la etiqueta ideal para textos escritos en sintaxis ligera, como Wiki o Markdown, que tienen la particularidad de ofrecer un marcado ligero del texto en bruto, preservando así su buena legibilidad.
Ejemplo de texto Markdown con la etiqueta <pre>:
El título del apartado
======================
Aquí hay una palabra en **negrita** y luego una lista :
* es simple;
* es eficaz.Árbol
O para un árbol de ficheros, expresado en tabulaciones.
Ejemplo de estructura de árbol con la etiqueta <pre>:
website/ index.html img/ logo.png css/ style.css img/ background.png
Código informático
También permite visualizar código informático bien sangrado y bien alineado, es decir, tal como se ha introducido. En este caso, hay que añadir <code>, por supuesto. La etiqueta <pre> respeta el formato previo, pero sin presumir la naturaleza del texto que contiene, mientras que la etiqueta <code> designa explícitamente un fragmento de código. Por tanto, ambas son necesarias para mostrar un bloque de código.
<?php
// esto es lenguaje php
echo "Hola";
?>La etiqueta <pre> tiene la particularidad de restablecer el texto en el código fuente de la misma forma en que fue tecleado: se conservan los espacios múltiples, las tabulaciones y los saltos de línea, mientras que en todas las demás partes de la página web, los espacios se reducen a un solo espacio, el salto de línea se obtiene con <br> y el salto de línea no existe… La etiqueta <pre> permite, por tanto, escapar excepcionalmente de este formateado, para respetar el formateado del texto original, del que se dice por tanto lógicamente que está “preformateado”.
