Pre Tag

The <pre> tag in HTML is used to display text exactly as it is typed, including all spaces and line breaks. This makes it the perfect choice for showing code snippets, poems, or any content that requires fixed formatting.

Purpose of Pre Tag

By default, HTML ignores extra spaces and line breaks. But the <pre> tag preserves them. This is essential when you want your text layout to appear exactly as written, such as programming code, ASCII art, and output from terminals or scripts.

Basic Syntax

				
					<pre>
  Your text goes here exactly as you want it to appear.
</pre>

The tag must include both opening <pre> and closing </pre> tags.

Example: Python Code Block

Let’s use the <pre> tag to show a simple Python script.

				
					<pre>
# A simple Python program to print "Hello, World!"
def main():
    print("Hello, World!")

if __name__ == "__main__":
    main()
</pre>

When viewed in a browser, the output will look exactly like this:

Every space and line break are preserved. This is especially important in code, where indentation has meaning.

Styling with CSS

Although the tag maintains formatting, you can still apply custom styles to it:

				
					pre {
  font-family: monospace;
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
}

When to Use

To present programming code examples.
To display text-based data like logs or configuration files.
Anytime you need fixed-width, preformatted text on your page.

Final Note:

The <pre> tag is a simple yet powerful tool for slowing fixed-format text in HTML. It gives users a way to present content exactly as it appears, making it an essential tag for developers, educators, and technical writers.