HTML Pre tag - Learn Fasta

Pre tag

Pre tag in HTML:

The "pre" tag in HTML is used to display text or code exactly as it is written in the HTML, including spaces, line breaks, and formatting.

It's often used to display preformatted text, such as code snippets, ASCII art, or any content where preserving the original formatting is important.

Example

The "pre" tag is sort of a virtual typewriter.

It's used to display textual content or code precisely because it appears in the HTML source, keeping areas, line breaks, and formatting.

html Live Editor!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Code Example</title>
  <style>
    body {
      font-family: 'Courier New', monospace;
      text-align: center;
      margin-top: 50px;
      font-size: 18px;
    }
    h1 {
      color: #3498db; /* Blue color for heading */
    }
    pre {
      background-color: #ecf0f1; /* Light gray background color for code block */
      padding: 20px;
      border-radius: 8px; /* Rounded corners for code block */
      overflow-x: auto; /* Enable horizontal scrolling if needed */
    }
  </style>
</head>
<body>
  <h1>Code Example</h1>
  <pre>
function greet(name) {
  return "Hello, " + name + "!";
}

var result = greet("Alice");
console.log(result);
  </pre>
</body>
</html>