Theory
Theory

Preformatted text

You've probably already noticed how different the display of code in an HTML editor and in a mini-browser is.

You can put as many spaces as you want in HTML code, but the browser will display them as one. You can also put as many line breaks as you want in HTML code, but the browser will not show them unless you use special tags like <p> or <br>.

You can change this browser behavior by using the <pre> tag, which stands for "preformatted text". The browser saves and displays all spaces and hyphens that are inside the <pre> tag.

This tag is most often used when displaying code samples.

index.html

HTML

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

GoalsCompleted

Wrap all text inside the <body> tag in the <pre> tag.