Scaler
Academy
Data Science
Neovarsity
New
Skill Test
Free Masterclass
Search for Articles, Topics
<pre> Tag in HTML

<pre> Tag in HTML

By Srishti Trivedi
5 mins read
Last updated: 21 Jun 2022
143 views
Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Start Learning View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Topics Covered

Overview

If we have a few letters or sentences written in a certain way and we want to print them in the same fashion on the webpage. We cannot do this by writing it in the normal HTML, as in HTML, the whitespaces are merged into a single whitespace. So, to do this, we use HTML pre-tags.

You must revise concepts from the HTML tags to better understand the pre-tag in HTML.

Introduction

Html <pre> tags are used for rendering a block of text as it is from the HTML file onto the webpage. It helps us to stop browsers from ignoring any desired white spaces, line breaks, tabs or any other formatting tool in HTML. The preformatted text is generally shown in non-proportional, or monospaced, font, which can be separately styled by CSS.

Syntax

The syntax for the pre tag in HTML is as below.

One Basic Example

Let us understand the concept of the pre tag in HTML via an example.

CODE:

OUTPUT:

EXPLANATION:

As shown above, we have the mentioned our lines in the pre tag in HTML, and therefore in output, we see the same being as the output. And as we know, the pre-tag in HTML is displayed in a fixed-width font, as can be seen. We can alter this with the use of CSS.

Attributes

The pre-tag in HTML is found to support the following attributes also.

The Global Attributes: The <pre> tag in HTML supports the majority of all the global attributes that are described in an HTML Attribute Reference.

The Specific Attributes: The <pre> tag in HTML also supports the width attribute. It has the value of a number. The width attribute defines the specified width of the preformatted text. It is recently deprecated in HTML as it describes the desired width of a preformatted text.

The Event Attributes: The <pre> tag in HTML supports all the event attributes described in − the HTML Events Reference.

How to Use < pre > Tag in HTML?

The <pre> tag in HTML can be described as the preformatted text. The text specified in a <pre> element is explained as a fixed-width font where the text preserves both the spaces and the line breaks as well. The text will be described and shown exactly as written in the HTML source code, which is liable to change using the CSS.

The Tag Descriptions are as follows:

  • <code> Describes a piece of the computer code
  • <samp> Describes a sample output from the computer program
  • <kbd> Describes the keyboard input
  • <var> Describes a variable

< pre > Tag Examples

Preformatted Text

Preformatted Text can be described as the text which is already having a known width and height. This predefined aspect ratio can be changed with the help of CSS.

Below is an example of a preformatted text.

CODE:

OUTPUT:

Create a Preformatted Text with a Fixed Width

Below is an example of a preformatted text with a fixed width. As the width we specified as 900px, it is in that ratio or area only. Try yourself by adjusting the width and understanding the concept better.

CODE:

OUTPUT:

Java Code within < pre >

Below we have the java code defined in the pre tag in HTML:

CODE:

OUTPUT:

EXPLANATION:

As shown above, while writing the java code inside the pre-tag in HTML, we see the whole code getting printed as an output which was the expected behaviour of the pre-tag. When we are removing the pre-tag in HTML like from the above example, if we do so, all the text will be displayed in a single line.

Accessibility Concerns

We might have noticed an issue with people who are experiencing low vision conditions while reading. When they are browsing with the help of assistive technology such as a screen reader, they might have trouble understanding the preformatted text characters and what is being expressed whenever they are read out in a proper sequence.

Therefore, it becomes important to provide an alternate description for the images or diagrams which are created using the preformatted text.

With the pre-tag that has a preformatted text visual, it can be of great help for them. It is advised that the alternate description must clearly describe and concisely explain the image or diagram's content which can be achieved with the help of the <pre> tag in HTML.

The use of the <pre> tag in HTML can help the text under the images to be at ease for the reader. It permits the preformatted ASCII art to be described as an image with an alternative text along with the figcaption explaining the image's caption.

Browser support

There are certain browsers mentioned below that support the pre-tag in HTML.

  • Google Chrome
  • Firefox
  • Internet Explorer
  • Android
  • Safari
  • Opera

Conclusion

  • The <pre> tag in HTML majorly defines the block of preformatted text that preserves the text spaces, the line breaks, tabs, and other formatting characters that are usually ignored by web browsers.
  • The syntax for pre-tag in HTML is as below: