Learn How to use HTML pre tag

HTML: pre tag

In this series of learning HTML, we will teach you how to use HTML pre tag with proper syntax and lots of examples. Let’s start on the HTML pre tag.

Description of HTML pre tag

The HTML <pre> tag (short for “preformatted text”) is used to define the preformatted text that should be displayed in a fixed-width font, and maintains all the white space and line breaks present in the text.

When you use the <pre> tag to format text, the text is rendered in a way that preserves the original spacing and formatting of the text. This can be useful for displaying text that is meant to be presented in a specific way, such as ASCII art, computer code, or text that needs to be displayed with specific formatting like a poem or song lyrics.

Here is an example of using the <pre> tag to display some computer code:

<pre>
function helloWorld() {
console.log("Hello, world!");
}
</pre>

In the above example, the text inside the <pre> tags is rendered in a fixed-width font and any line breaks and white-space characters are maintained.

Syntax of HTML pre tag

The syntax of the HTML <pre> tag is as follows:

<pre>
<!-- preformatted text goes here -->
</pre>

The text that you want to format as preformatted should be placed between the opening and closing <pre> tags. This can include any text, HTML tags, or code snippets that you want to display with the original line breaks and spacing.

Additionally, the <pre> tag can accept several optional attributes that can modify its behavior. These attributes include:

class: Specifies one or more CSS classes to apply to the <pre> element.
dir: Specifies the text direction of the content within the <pre> element. Valid values are “ltr” for left-to-right and “rtl” for right-to-left.
lang: Specifies the language of the content within the <pre> element.
title: Specifies additional information about the content within the <pre> element. This information is typically displayed as a tooltip when the user hovers over the element.

Here is an example of using the class attribute to apply a custom style to a <pre> element:

<pre class="my-custom-style">
<!-- preformatted text goes here -->
</pre>

Attributes

The HTML <pre> tag supports several global attributes that can be used with any HTML element. Here are some of the commonly used global attributes with the <pre> tag:

class: Specifies one or more CSS classes to apply to the element.
id: Specifies a unique identifier for the element.
style: Specifies one or more inline CSS styles to apply to the element.
title: Specifies additional information about the element. This information is typically displayed as a tooltip when the user hovers over the element.

Here is an example of using the class attribute to apply a custom style to a <pre> element:

<pre class="my-custom-style">
<!-- preformatted text goes here -->
</pre>

You can also use the id attribute to create a unique identifier for the <pre> element, like this:

<pre id="my-preformatted-text">
<!-- preformatted text goes here -->
</pre>

This can be useful if you want to target the element using JavaScript or CSS. Similarly, you can use the style attribute to apply inline styles to the element:

<pre style="font-family: monospace; font-size: 14px;">
<!-- preformatted text goes here -->
</pre>

And finally, you can use the title attribute to provide additional information about the element:

<pre title="This is some preformatted text">
<!-- preformatted text goes here -->
</pre>

Note

Here are some important notes on the HTML <pre> tag:

The <pre> tag is used to display preformatted text that should be displayed with fixed-width font and with the original line breaks and spacing. This is commonly used to display computer code or other text that needs to be displayed with specific formatting.
The text between the opening and closing <pre> tags is displayed exactly as it appears in the HTML code, with any white-space and line breaks preserved.
The <pre> tag supports several global attributes such as class, id, style, and title. These attributes can be used to modify the appearance or behaviour of the element.
When using the <pre> tag to display computer code, it’s common to also use the <code> tag to indicate the code itself, like this:

<pre>
<code>
function helloWorld() {
console.log("Hello, world!");
}
</code>
</pre>

This helps to distinguish the code from any other preformatted text that may be included in the <pre> element.

5. Be aware that using the <pre> tag for large amounts of text can result in a lot of white-space being displayed, which can make the content difficult to read on small screens. In these cases, it may be better to use a different approach, such as responsive design or text wrapping.

Browser Compatibility

The HTML pre tag has essential support with the following browsers:

Chrome
Internet Explorer (IE)
Opera
Safari (WebKit)
Firefox (Gecko)
Android
Firefox Mobile (Gecko)
Edge Mobile
Opera Mobile
Safari Mobile

Examples of HTML pre tag

We will discuss the <pre> tag below, exploring examples of how to use the <pre> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

HTML5
HTML4
XHTML

We will discuss the HTML pre tag below, with some examples of how to use the pre tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

HTML5
HTML4
XHTML

HTML5 Document

Here are a few examples of using the HTML <pre> tag in an HTML5 document:

Example 1: Displaying computer code

<!DOCTYPE html>
<html>
<head>
<title>Example 1</title>
</head>
<body>
<pre>
<code>
function addNumbers(a, b) {
return a + b;
}
</code>
</pre>
</body>
</html>

In this example, the <pre> tag is used to display some JavaScript code. The <code> tag is also used to indicate the code itself.

Example 2: Displaying ASCII art

<!DOCTYPE html>
<html>
<head>
<title>Example 2</title>
</head>
<body>
<pre>
.--.
.---'..'|`
/ __`' ' `
| / ` ',.| __
'-)_}------'``` \
\\
^
</pre>
</body>
</html>

In this example, the <pre> tag is used to display some ASCII art.

Example 3: Displaying poetry

<!DOCTYPE html>
<html>
<head>
<title>Example 3</title>
</head>
<body>
<pre>
In Flanders fields the poppies blow
Between the crosses, row on row,
That mark our place; and in the sky
The larks, still bravely singing, fly
Scarce heard amid the guns below.
</pre>
</body>
</html>

In this example, the <pre> tag is used to display a poem. The original formatting, including line breaks and spacing, is preserved.

HTML 4.01 Transitional Document

Here are a few examples of using the HTML <pre> tag in an HTML 4.01 Transitional document:

Example 1: Displaying computer code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Example 1</title>
</head>
<body>
<pre>
<code>
function addNumbers(a, b) {
return a + b;
}
</code>
</pre>
</body>
</html>

In this example, the <pre> tag is used to display some JavaScript code. The <code> tag is also used to indicate the code itself.

Example 2: Displaying ASCII art

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Example 2</title>
</head>
<body>
<pre>
.--.
.---'..'|`
/ __`' ' `
| / ` ',.| __
'-)_}------'``` \
\\
^
</pre>
</body>
</html>

In this example, the <pre> tag is used to display some ASCII art.

Example 3: Displaying poetry

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Example 3</title>
</head>
<body>
<pre>
In Flanders fields the poppies blow
Between the crosses, row on row,
That mark our place; and in the sky
The larks, still bravely singing, fly
Scarce heard amid the guns below.
</pre>
</body>
</html>

In this example, the <pre> tag is used to display a poem. The original formatting, including line breaks and spacing, is preserved.

Note that the syntax for declaring the document type (<!DOCTYPE>) and the DTD reference (http://www.w3.org/TR/html4/loose.dtd) is slightly different in HTML 4.01 Transitional compared to HTML5.

XHTML 1.0 Transitional Document

Here are a few examples of using the HTML <pre> tag in an XHTML 1.0 Transitional document:

Example 1: Displaying computer code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example 1</title>
</head>
<body>
<pre>
<code>
function addNumbers(a, b) {
return a + b;
}
</code>
</pre>
</body>
</html>

Example 2: Displaying ASCII art

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example 2</title>
</head>
<body>
<pre>
.--.
.---'..'|`
/ __`' ' `
| / ` ',.| __
'-)_}------'``` \
\\
^
</pre>
</body>
</html>

In this example, the <pre> tag is used to display some ASCII art. Note the use of the XHTML namespace declaration in the <html> tag.

Example 3: Displaying poetry

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example 3</title>
</head>
<body>
<pre>
In Flanders fields the poppies blow
Between the crosses, row on row,
That mark our place; and in the sky
The larks, still bravely singing, fly
Scarce heard amid the guns below.
</pre>
</body>
</html>

In this example, the <pre> tag is used to display a poem. The original formatting, including line breaks and spacing, is preserved. Note the use of the XHTML namespace declaration in the <html> tag, as well as the self-closing syntax for the <br> tag (which is required in XHTML).

XHTML 1.0 Strict Document

Here are a few examples of using the HTML <pre> tag in an XHTML 1.0 Strict document:

Example 1: Displaying computer code

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example 1</title>
</head>
<body>
<pre>
<code>
function addNumbers(a, b) {
return a + b;
}
</code>
</pre>
</body>
</html>

In this example, the <pre> tag is used to display some JavaScript code. The <code> tag is also used to indicate the code itself. Note the use of the XHTML namespace declaration in the <html> tag, as well as the use of the xml:lang and lang attributes to specify the language of the document.

Example 2: Displaying ASCII art

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example 2</title>
</head>
<body>
<pre>
.--.
.---'..'|`
/ __`' ' `
| / ` ',.| __
'-)_}------'``` \
\\
^
</pre>
</body>
</html>

In this example, the <pre> tag is used to display some ASCII art. Note the use of the XHTML namespace declaration in the <html> tag, as well as the use of the xml:lang and lang attributes to specify the language of the document.

Example 3: Displaying poetry

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example 3</title>
</head>
<body>
<pre>
In Flanders fields the poppies blow
Between the crosses, row on row,
That mark our place; and in the sky
The larks, still bravely singing, fly
Scarce heard amid the guns below.
</pre>
</body>
</html>

In this example, the <pre> tag is used to display a poem. The original formatting, including line breaks and spacing, is preserved. Note the use of the XHTML namespace declaration in the <html> tag, as well as the use of the xml:lang and lang attributes to specify the language of the document.

XHTML 1.1 Document

Here are a few examples of using the HTML <pre> tag in an XHTML 1.1 document:

Example 1: Displaying computer code

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example 1</title>
</head>
<body>
<pre>
<code>
function addNumbers(a, b) {
return a + b;
}
</code>
</pre>
</body>
</html>

Example 2: Displaying ASCII art

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example 2</title>
</head>
<body>
<pre>
.--.
.---'..'|`
/ __`' ' `
| / ` ',.| __
'-)_}------'``` \
\\
^
</pre>
</body>
</html>

In this example, the <pre> tag is used to display some ASCII art. Note the use of the XHTML namespace declaration in the <html> tag, as well as the use of the self-closing syntax for empty elements.

Example 3: Displaying poetry

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example 3</title>
</head>
<body>
<pre>
In Flanders fields the poppies blow
Between the crosses, row on row,
That mark our place; and in the sky
The larks, still bravely singing, fly
Scarce heard amid the guns below.
</pre>
</body>
</html>