Elemento pre

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento pre representa un bloque de texto preformateado donde, en contraste con otros elementos, los espacios continuos y los quiebres de línea son respetados. Además, los navegadores utilizan fuentes de ancho constante para representar al texto en este elemento, lo que significa que todos los caracteres tendrán el mismo ancho.

Nota que los navegadores no aplicarán quiebres de línea automáticos a los bloques de texto dentro de un elemento pre. Esto significa que las líneas de texto no serán divididas a menos que un quiebre de línea sea encontrado.

El elemento pre es comúnmente utilizado para mostrar código de computadora, texto plano o arte ascii. En algunos casos, es acompañado por otros elementos como code, samp o kbd.

Ejemplos

En el siguiente ejemplo hay un párrafo seguido de un bloque pre, ambos intencionalmente con el mismo contenido, de modo que puedas ver la diferencia entre ellos y lo que tiene de particular el bloque pre.

<p>Las cosas que necesitarás están listadas aquí:
  - Una linterna.
  - Una caja de fósforos.
  - Un cuchillo afilado.
</p>
<pre>Las cosas que necesitarás están listadas aquí:
  - Una linterna.
  - Una caja de fósforos.
  - Un cuchillo afilado.
</pre>

Las cosas que necesitarás están listadas aquí: - Una linterna. - Una caja de fósforos. - Un cuchillo afilado.

Las cosas que necesitarás están listadas aquí:
  - Una linterna.
  - Una caja de fósforos.
  - Un cuchillo afilado.

Una cosa importante a notar aquí es que el navegador extirpa todos los espacios repetidos y quiebres de línea para el elemento p (y para todos los demás elementos excepto pre).

Ahora, en el segundo ejemplo, veremos cómo el elemento pre se combina con code para mostrar un trozo de código de computadora.

<p>La función es así:</p>
<pre><code>function diHola() {
  console.log('Hola!');
  alert('Hola!');
}</code></pre>

La función es así:

function diHola() {
  console.log('Hola!');
  alert('Hola!');
}

Nota como en este ejemplo, pre se encuentra conteniendo a code y no al revés. Esto se debe a que code no puede contener elementos flow como pre. El mismo razonamiento se aplica a otros elementos como samp o kbd.

Atributos

Atributos específicos

width

Un núero de caracteres para usar como ancho del bloque.

Este atributo se ha vuelto obsoleto en HTML5 debido a su naturaleza visual. Los autores deberían abandonar su uso en favor de las hojas de estilo.

Ejemplo

<pre width="10">bool diHola(int veces);</pre>

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.