HTML Tutorial

HTML Tag: <pre>

Usage of <pre>:

The <pre> tag in HTML formats text in a fixed-width font, preserving whitespace and line breaks. It's commonly used to display code snippets, text documents, and formatted data.

Attributes of <pre>:

Attribute Description
width Sets the width of the text area in pixels or percentage
wrap Specifies whether to wrap long lines (optional)

Examples with <pre>:

Display code snippet:

<pre>
function sum(a, b) {
  return a + b;
}
</pre>

Preserve line breaks in a text document:

<pre>
Lorem ipsum
dolor sit amet,

consectetur.
</pre>

Format data in a table:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <pre>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>25</td>
  </tr>
  </pre>
</table>

HTML Example: Exploring the <pre> Tag

<!DOCTYPE html>
<html>
<head>
  <title>Using the `<pre>` Tag</title>
</head>
<body>
  <h1>Code Snippet</h1>
  <pre>
    &lt;script&gt;
    function greet(name) {
      console.log("Hello, " + name);
    }
    &lt;/script&gt;
  </pre>

  <h1>Text Document with Line Breaks</h1>
  <pre>
    This is a text document.

    It has preserved line breaks and whitespace.
  </pre>
</body>
</html>