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.
Tabla de contenidos
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.
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.