Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Home > Web Front-end > HTML Tutorial > body text

Pre Tag in HTML

WBOY

Release： 2024-09-04 16:25:20

Original

790 people have browsed it

The Web browser is ignored space, line breaks, and other formatting characters of text. If you wanted some format, then tag or attribute must have used every time. It is used to remove this drawback. Pre tag is used to keep the text format as it is. It is changed when CSS tags are applied. It shows the preformatted text of the content.

Syntax:

HTML has many tags for different purpose.

Example:

, etc.</li>
</ul>
<p>A pre tag has an opening tag as well as a closing tag like other HTML tags.</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false"> content of web

Copy after login

The above syntax used where we need the preformatted text of the content.

How Pre Tag Works In HTML?

Below is the explanation for how Pre tag work:

1. Using Pre Tag In Html

Code:

<!DOCTYPE>
<html>
<head>
<title> using pre tag in html </title>
</head>
<body>
<pre class="brush:php;toolbar:false">
The Web browser is ignored space,   line breaks, and other formatting characters of text.
If you wanted some   format then tag or attribute must have used every time.
Pre tag in HTML used to remove this drawback. Pre tag used to keep text format as it is.
It is   changed when CSS tags are applied.
Pre tag in HTML shows the  preformatted text of the content.

Copy after login

Output:

Pre Tag in HTML

Explanation to the above code: Show the above example of it. When pre-tag is applied in the required part of content, the content looks in formatted as it is. Space and the next line are not ignored when pre tag applied to the text.

2. Without Using Pre Tag In Html

Code:

<!DOCTYPE>
<html>
<head>
<title> using pre tag in html </title>
</head>
<body>
The Web browser is ignored space, line breaks, and other
formatting characters of text.
If you wanted some format then tag or attribute must have
used every time.
This tag is used to remove this drawback. Pre tag used to
keep text format as it is. It is changed when CSS tags are applied.
This pre tag shows the preformatted text of the content.
</body>
</html>

Copy after login

Output:

Pre Tag in HTML

Explanation to the above code: Show the above example, which is without using it. Space, line break and new line automatically ignored. The web page shows content according to their requirements. To give space and break the line, we have to use HTML tags.

3. Use HTML other tags

Code:

<!DOCTYPE>
<html>
<head>
<title> using pre tag in html </title>
</head>
<body>
The Web browser is ignored space,         line breaks, and other formatting characters of text.<br>
If you wanted some      format then tag or attribute must have used every time.<br>
This is used to remove its drawback. Pre tag used to keep text format as it is.<br> It is changed when CSS tags are applied. <br>
It shows preformatted text of the content.<br>
</body>
</html>

Copy after login

Output:

Pre Tag in HTML

Explanation to the above code: Show the above example, which is without using the pre tag. But instead of using pre tag, we are using other HTML tags.
tag is used to break the line and character used for space.

Use of Pre Tag

Web pages ignore space and line break if we are not using tags and attribute. But every line, we have to use these attributes.
Pre tag preserves the original content format.
The developer can use one tag for the block instead of using many tags. Reduce the coding and easy to understand.

Pre Tag supports the following web browsers:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

Example to Implement

Below are the examples of implementing in it:

Example #1

Using Pre Tag with a CSS tag.

Code:

<!DOCTYPE>
<html>
<head>
<title> using pre tag with CSS </title>
<style>
pre {
font-family: Arial;
color: yellow;
border: solid black;
background-color: black;
}
</style>
</head>
<body>
<pre class="brush:php;toolbar:false">
The Web browser is ignored space, line breaks, and other formatting characters of text.
If you wanted some format then tag or attribute must have used every time.
This tag in HTML used to remove this drawback. Pre tag used to keep text format as it is.
It is changed when CSS tags are applied.
This tag in HTML shows the preformatted text of the content.

Copy after login

Output:

Pre Tag in HTML

Explanation to the above code: Show the above example is using it with CSS style tags. If you used pre tag then also CSS style tags can change the format of content. Style tag used font style, border, and text color in CSS.

Example #2

The Below Example. This is a combination of other HTML tags and pre tags with CSS.

Code:

<!DOCTYPE>
<html>
<head>
<title> using pre tag in html  with CSS </title>
<style>
pre {
font-family: Arial;
color: yellow;
border: solid black;
background-color:black;
}
</style>
</head>
<body>
<p>
The Web browser is ignored space, line breaks, and other formatting characters of text.
If you wanted some format then tag or attribute must have used every time.
This tag used to remove this drawback. Pre tag used to keep text format as it is.
It is changed when CSS tags are applied.
It shows the preformatted text of the content.
</p>
<pre class="brush:php;toolbar:false">
The Web browser is ignored space, line breaks, and other formatting characters of text.
If you wanted some format then tag or attribute must have used every time.
This tag in HTML used to remove this drawback. Pre tag used to keep text format as it is.
It is changed when CSS tags are applied.
This tag in HTML shows the preformatted text of the content.

Copy after login

Output:

Pre Tag in HTML

Conclusion

The developer uses this tag to reduce coding and get formatted content. The web cannot ignore the format of content inside the pre tag.

The above is the detailed content of Pre Tag in HTML. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

html html5 HTML Tutorial HTML Properties HTML tags

source：php

Previous article：Inline Tags in HTML Next article：Span Tag in HTML

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn