Sometimes, you want your text to follow the exact format of how it is written in the HTML document. In these cases, you can use the preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source document.
Example,
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>This will produce the following result,
function testFunction(strText) {
alert(strText);
}This JavaScript code defines a simple function named testFunction(strText) which displays a popup message box on the screen using the alert( ) method. The function takes one parameter, strText, nd whenever it is called such as by clicking a button it shows the value of that parameter inside a browser alert box. For example, calling testFunction(‘Hello, World!’) will display a popup saying “Hello, World!” In short, it is a basic JavaScript function used to show messages or test outputs in an alert window.
What can be written between <pre>…</pre> tags?
In HTML, <pre>…</pre> tag means Preformatted Text, that is, whatever you write inside it will appear in the browser exactly as you have written it (including spaces, tabs, line breaks).
This means that inside the <pre> tag you can put any content where spacing and formatting are important.
You can write the following inside <pre>.
- Plain Text
- Code Snippets (HTML, CSS, JavaScript, etc.)
- Poems or Song Lyrics
- ASCII Art or Symbols
- Formatted Data or Tables (Text-based layout)