HTML <pre> Tag

The HTML <pre> tag is used to display preformatted text in web pages. This tag ensures that the text within it retains its formatting, including spaces, line breaks, and tabs, exactly as they appear in the source code. When wrapped inside the <pre> tag, the content is rendered in a fixed-width font (usually a monospaced font), making it ideal for presenting code snippets, ASCII art, or other types of text that require specific formatting.

The <pre> tag is crucial for displaying content where preserving white spaces and formatting is essential. This tag ensures that the browser does not collapse multiple spaces or line breaks, which is the default behavior in HTML.

Syntax of the <pre> Tag

html
<pre>
  Preformatted text goes here.
</pre>

Any text inside the <pre> element is displayed as it is, without being modified by the browser's default rendering behavior.

Attributes of the <pre> Tag

The <pre> tag supports various global attributes that allow you to enhance its styling and functionality. Here are the key attributes:

AttributeDescription
classSpecifies one or more class names for the <pre> element, allowing you to apply custom CSS styles.
idSpecifies a unique ID for the <pre> element, useful for CSS and JavaScript manipulation.
styleAllows you to apply inline CSS styles directly to the <pre> element.
langSpecifies the language of the content inside the <pre> tag, useful for accessibility and translation purposes.
width (Deprecated)In older HTML versions, the width attribute was used to set the width of the <pre> tag, but this is now considered obsolete in favor of CSS styling.

Examples of HTML <pre> Tag

Example 1: Displaying Preformatted Text

html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Preformatted Text Example</title>
</head>
<body>
    <pre>
        This is an example of preformatted text.
        Notice how the spacing and line breaks are preserved exactly as written.
    </pre>
</body>
</html>

In this example, the text inside the <pre> tag is displayed with its original formatting, including spaces and line breaks.

Example 2: Displaying Code Snippets

html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Code Example</title>
</head>
<body>
    <pre>
        function greet() {
            console.log("Hello, world!");
        }
    </pre>
</body>
</html>

In this example, the <pre> tag is used to display a JavaScript code snippet, with the indentation and line breaks preserved.

FAQs About HTML <pre> Tag

Q1: What is the purpose of the HTML <pre> tag?
A: The <pre> tag is used to display preformatted text, where the spaces, line breaks, and other formatting are preserved exactly as written in the source code.

Q2: Does the <pre> tag affect SEO?
A: While the <pre> tag doesn't directly impact SEO, it improves readability for certain types of content like code snippets or structured text, which can enhance user experience and engagement.

Q3: Can I style the content inside the <pre> tag?
A: Yes, the <pre> tag supports CSS styling. You can apply styles such as fonts, colors, and text sizes to customize the appearance of the preformatted text.

Q4: Does the <pre> tag support inline HTML elements?
A: Generally, most inline HTML elements (like <span>) are allowed inside the <pre> tag, but block-level elements like <div> are not recommended.

Q5: When should I use the <pre> tag?
A: The <pre> tag should be used when you need to preserve the exact formatting of text, such as when displaying code snippets, technical documentation, or text that requires specific indentation and line breaks.

tools

HTML

Related Articles