Add Pre Tag to Your Webpage
Working with Text
In this lesson, we will learn how to use the pre tag in HTML.
What is Pre Tag in HTML
The pre tag in HTML stands for preformatted text. It is a tag used to preserve the formatting of text in HTML. It means that any text within the pre tag will be displayed in the same format as it appears in the HTML code.
The pre tag is usually used to display text or code snippets that require fixed-width formatting. This tag is especially useful when displaying programming code as it preserves the original format, including white spaces and line breaks.
The syntax for the pre tag is straightforward. It requires an opening and closing pre tag, and the formatted text is placed between these two tags.
Here's an example of how to use <pre> tag in HTML:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pre Tag Example</title>
</head>
<body>
<p> This is an example of preformatted text. The code will be displayed in the same format as in the HTML code.</p>
<pre>
function addNumbers(x, y) {
return x + y;
}
console.log(addNumbers(5, 10)); // Output: 15
</pre>
</body>
</html>Attributes of Pre Tag
Here are the attributes we can use with the pre tag:
- id
- class
- style
- title
id
The id attribute is used to assign a unique name to an element on a web page. We can assign an id to the <pre> tag and use it to apply a specific style to that particular tag.
Example
<pre id="mycode">
function addNumbers(x, y) {
return x + y;
}
console.log(addNumbers(5, 10)); // Output: 15
</pre>In the above example, we assign an id attribute to the pre tag with a value mycode. In CSS and JavaScript, we can use the name mycode to access the specific pre tag whose id value is set to the name mycode.
Note: The id attribute can be used on any tag to assign a unique tag name. It must be unique for each tag, meaning we can't use the same id name for another tag in an HTML document.
class
The class attribute is used to define a group of elements and to apply a specific style to that group. We can define a class for the pre tags and use it to apply a specific style to all the pre tags that belong to a particular class.
Example
<pre class="samplecode">for (var i = 2; i < 20; i=i+2) {
console.log(i);
}</pre>
<pre class="samplecode">for (var i = 0; i < 10; i++) {
console.log(i);
}</pre>In the above example, both pre tags have the same class name, samplecode. If any CSS style is applied to the class name samplecode, it will be applied on both pre tags.
Note: The class attribute can be used on any tag to assign a group name to the tag.
style
The style attribute can be used to apply inline css styles to the pre tag. We will learn how to apply inline css style using the style attribute later in our CSS tutorial.
Example
<pre style="color: red">for (var i = 0; i < 10; i++) {
console.log(i);
}</pre>The style="color: red" will change the font color of the pre tag to red.
title
The title attribute can be used to add a tooltip or additional information to the pre tag, which will only appear when the user places the mouse cursor on the preformatted text.
Example
<pre title="This is an example of for loop in javascript.">for (var i = 0; i < 10; i++) {
console.log(i);
}</pre>