HTML <pre> Tag
This article aims to teach Tag pre through examples, in the belief that it will fill a need for education.
The HTML <pre> tag is used to define preformatted text, which preserves whitespace and line breaks.
Key Features
Here are some of the key features and uses of the <pre> tag:
- The <pre> tag preserves all whitespace and line breaks in the text, including spaces, tabs, and newlines. This can be useful for displaying code or other types of text where whitespace is important.
- The text within the <pre> tag is typically displayed in a monospace font, which ensures that each character takes up the same amount of space. This can be useful for displaying code or other types of text where alignment is important.
- The <pre> tag is often used to display code examples, as it preserves whitespace and allows the code to be displayed in a monospace font. This can be useful for tutorials, documentation, and other types of educational content.
- The <pre> tag can be used to display ASCII art, which is a form of art that is created using only characters from the ASCII character set. The monospace font and preserved whitespace of the <pre> tag can help ensure that the ASCII art is displayed correctly.
Here is the preformatted text:
Example:
Here’s how to create fixed-width pre-formatted text using CSS:
Example:
Here is another example of the <pre> tag in HTML:
Example:
Using the <pre> tag to create a fixed-width layout for a section of text on a website:
Example:
Tag pre Usage
The Tag pre <pre> indicates preformatted text.
Text in an <pre> element appears in a fixed-width font with both spaces and line breaks maintained. You will see the text the same way as it would appear in the HTML source code.
Be sure to check out the following:
| Tag | Overview |
|---|---|
| <code> | An explanation of a block of computer code. |
| <samp> | Describe how a computer program produces sample output. |
| <kbd> | Explain keyboard input. |
| <var> | Defining a variable. |
Attributes
Global
The Tag pre <pre> is also compatible with the Global Attributes in HTML.
Event
Tag <pre> also accepts the Event Attributes in HTML.
Browser Compatibility
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <pre> | Yes | Yes | Yes | Yes | Yes |
Predefined CSS
The <pre> element is frequently generated with the given default values:
pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
}HTML <pre> Tag Benefits
Here are some benefits of using the HTML <pre> tag:
- The <pre> tag preserves all whitespace characters, including spaces, tabs, and line breaks. This makes it easier to display code or other text that relies on precise formatting.
- The text within the <pre> tag is displayed in a monospace font, where each character takes up the same amount of space. This is particularly useful for displaying code, where alignment is important.
- The monospace font used within the <pre> tag can enhance the readability of text, particularly for code or ASCII art. This helps make the text easier to read and understand.
- The <pre> tag can improve the accessibility of your content by making it easier for screen readers and other assistive technologies to parse and display the text.
- The <pre> tag is widely supported by all modern browsers and devices, making it a reliable way to display preformatted text.
- You can customize the styling of the text within the <pre> tag using CSS to suit the design of your website or application.
