Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to display HTML tags as plain text in HTML?
HTML tags are used for defining the structure of the webpage. Various types of tags can use used for dealing with text in HTML. In this article, we will use the plaintext tag to display the HTML tag in the output. The examples used in this article will help you understand how to use this plaintext tag in various ways to display HTML tags as plain text.
Following are the HTML entities that displays the HTML text as plain text −
Syntax
<plaintext>...write the HTML tags</plaintext>
Plaintext is such type of tag that allows printing the HTML tags in the output. Once a tag is started, it does not require an ending tag. If we are using an end tag then that will also be printed in the output
Properties Used
The following properties used in the example are −
background-color − Define the background color of the body.
text-align − Define the horizontal alignment of the text.
Example 1
In this example, we will set some styling to the elements i.e. body, h1, and pre. The pre-element defines the preformatted text and set the multiple elements of HTML by giving before-after spacing inside the tags. This will represent the HTML tags as plain text in HTML.
<!DOCTYPE html>
<html>
<head>
<title>Plain text </title>
</head>
<body style="background-color: yellow;">
<h1 style="text-align: center;">Display the html text as plain text</h1>
<pre style="font-weight: bold; font-size:22px; color: green;">
Paragraph element: < p > < /p >
Body element: < body > < /body >
Center element: < center > < /center >
Highlight the text: < mark > < /mark >
Bold text: < b > < /b >
Ordered list: < ol > < /ol >
Unordered list: < ul > < /ul >
Heading element: < h1 > < /h1 >
Title element: < title > < /title >
Description list: < dl > < /dl >
Break tag: < br >
Horizontal tag: < hr >
</pre>
</body>
</html>
Example 2
In this example, we will use the h1 element to set the main title of the problem statement, and to make the title center it uses the property of text-align using inline CSS. Then use the plaintext element to set the multiple elements of HTML as plain text and get the output in the webpage.
<!DOCTYPE html> <html> <head> <title>Plain text </title> </head> <body style=> <h1 style="text-align:center;">Display the html text as plain text</h1> <plaintext style="font-size:20px;"> <p>Paragraph element</p> <body>Body element</body> <center>Center element</center> <mark>Highlight the text</mark> <b>Bold text</b> <ol>Ordered list</ol> <ul>Unordered list</ul> <h1>Heading element</h1> <title>Title element</title> <dl>Description list</dl> </body> </html>
Example 3
In this example, we will use the following HTML characters i.e. < to set the beginning of tag ‘<’ and > to set the ending of the tag ‘>’. Some more characters will be used for the punctuation. For example, " to set the double quotation in the text. These all steps cover the HTML tags as plain text in HTML.
<!DOCTYPE html>
<html>
<title> HTML entities </title>
<head>
</head>
<body>
<pre>
<h1> This is the HTML text as plain text </h1>
<p> This is paragraph </p>
<center> This is center </center>
<ul>
<li> list1 </li>
<li> list2 </li>
<li> " list3 " </li>
<li> " list4 " </li>
<li> list5 </li>
</ul>
</pre>
</body>
</html>
Conclusion
We saw the differences between all three examples of HTML text as plain text. The first example shows the plain text of HTML by using some space inside the tag and the second example used the plaintext tag to display the HTML tags. In the end, the third example used the HTML entities to show the plain text as HTML text.
2K+ Views
