Teoría
Teoría

Texto preformateado

Seguramente ya notaste que el código no se ve igual en el editor HTML que en el mini navegador.

Puedes poner todos los espacios que quieras en el código HTML, pero el navegador los mostrará como si fueran uno solo. Lo mismo ocurre con los saltos de línea: en el navegador no aparecerán a menos que uses etiquetas especiales, como <p> o <br>.

Ese comportamiento se puede cambiar con la etiqueta <pre>, que significa «texto preformateado». El navegador conserva y muestra todos los espacios y saltos de línea que estén dentro de <pre>.

Lo más común es usar esta etiqueta para mostrar ejemplos de código.

index.html

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Texto preformateado</title> </head> <body> .----------------. .----------------. .----------------. | .--------------. || .--------------. || .--------------. | | | _____ _____ | || | _________ | || | ______ | | | ||_ _||_ _|| || | |_ ___ | | || | |_ _ \ | | | | | | /\ | | | || | | |_ \_| | || | | |_) | | | | | | |/ \| | | || | | _| _ | || | | __'. | | | | | /\ | | || | _| |___/ | | || | _| |__) | | | | | |__/ \__| | || | |_________| | || | |_______/ | | | | | || | | || | | | | '--------------' || '--------------' || '--------------' | '----------------' '----------------' '----------------' </body> </html>

ObjetivosRealizado

Encierra dentro de la etiqueta <pre> todo el texto que está dentro de <body>.