Table of contents

HTML <pre> Tag

What is HTML <pre> Tag?

The HTML pre tag is used to display preformatted text on a webpage. The text inside this tag is shown exactly as it is written in the HTML code, including spaces, line breaks, and tabs. It is especially useful when displaying code snippets, poetry, or any text that needs to maintain a specific format.

The browser displays the content inside the pre tag in a fixed-width font (like monospace) and preserves all spaces and line breaks. This makes it easier for developers to present readable text or examples on documentation pages.

Syntax of the HTML <pre> Tag

plaintext
<pre>
Your preformatted text goes here
</pre>

The text placed between the opening <pre> and closing </pre> tags will appear exactly as it is typed, maintaining its original spacing and structure.

Examples of HTML <pre> Tag

Example 1: Basic HTML Pre Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

<pre>
Hello Scholar247,
This text keeps its
spaces and line breaks exactly
as written here.
</pre>

</body>
</html>

Explanation:
In this basic example, the browser displays the text with line breaks and spaces intact. This shows how the pre tag preserves the formatting exactly as typed in the HTML code.

Example 2: Displaying Code Snippet Using Pre Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

<h2>HTML Example on Scholar247</h2>

<pre>
<html>
  <head>
    <title>Welcome to Scholar247</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
</pre>

</body>
</html>

Explanation:
This example demonstrates how the pre tag is commonly used to display HTML or programming code samples on websites like Scholar247. The spacing, indentation, and structure of the code remain unchanged, making it easy for users to copy or read.

Attributes of the HTML <pre> Tag

The HTML pre tag supports the following attributes:

• width: Specifies the width of the preformatted text area (used in older HTML versions; not recommended now).
• class, id: Used to style or identify the pre tag using CSS or JavaScript.
• style: Allows inline styling such as font size, color, or background color.
• title: Provides additional information shown as a tooltip on hover.

Best Practices for HTML <pre> Tag

• Use the pre tag when text formatting and spacing are important.
• Avoid using it for large paragraphs, as it prevents responsive wrapping.
• Combine with the code tag when displaying programming examples.
• Use CSS to customize font, color, or background for better readability.
• Do not use pre tags for layout purposes, use CSS instead.

FAQs About HTML <pre> Tag

Q1: What is the purpose of the HTML pre tag?

The pre tag is used to display preformatted text where spaces and line breaks are preserved exactly as written in the HTML code.

Q2: Can I style text inside the pre tag?

Yes, you can use CSS properties like color, background-color, font-size, or padding to style the text inside the pre tag.

Q3: What is the difference between pre and code tags?

The pre tag preserves formatting like spaces and line breaks, while the code tag is used to define short pieces of code. They are often used together for displaying code snippets.

Q4: Does the pre tag affect SEO?

The pre tag itself doesn’t directly affect SEO. However, it improves readability for users and search engines when used to display code or structured content properly.

Q5: Can I use multiple pre tags on one page?

Yes, you can use as many pre tags as needed on a webpage. Each pre tag maintains its own formatting independently.

HTML

Related Articles