How to Display HTML Tags as Text
Are you looking for a solution to display HTML tags as text? Maybe you’re trying to show HTML code on your webpage as it is. Or maybe you type a symbol like greater than ‘>’ and it is not showing on your webpage as text.
This is happening because all these symbols like ‘><,/#*’ etc are reserved characters in HTML. HTML-reserved characters are interpreted as HTML code by the browsers that’s why HTML tags don’t display in your browser.
Hopefully, we have three different solutions to solve this problem. In this tutorial, we’re going to explore all the methods to display HTML tags as text. So, let’s begin with the first one.
How to Display HTML Tags as Text
1. Use HTML Entities to Show HTML Tags as Text
Using HTML entities is the most effective and safe method to show HTML tags as text. HTML Entities are special codes that represent reserved characters. We use entities to replace HTML-reserved characters like ‘<‘ or ‘>’ to show HTML tags as text.
Each HTML entity starts with & an ampersand sign followed by a unique number or code and ends with a semicolon (;).
For example, if you want to write the ‘<‘ symbol in your text then you have to use the character entity number which will be < for less than a symbol.
Here, is the list of the most popular HTML Entities below.
| Character | Entity Name | Entity Number | Description |
|---|---|---|---|
| < | < | < | less than |
| > | > | > | greater than |
| & | & | & | ampersand |
| “ | " | " | double quotation marks |
| ‘ | ' | ' | single quotation mark |
| |   | non-breaking space |
Here, you can check out the complete list of HTML entities.
All you have to do is just replace each character with their entity names or numbers in HTML code and the browser will output them as text.
Example to use HTML Entities:
The below HTML code example will display <h1> This is Heading </h2> as it is in your browser.
<h1>This is Heading</h1>In your browser, it will display HTML tags as text instead of just “This is paragraph” as shown below.
But what if you have a lot of HTML tags with ‘<‘ and ‘>’ symbols to display as text? For this, let’s go ahead to the next method that is easier than this one.
2. Use an Online HTML Entities Converter Tool
Sometimes, we have a lot of HTML code tags and we can’t quickly display those HTML tags as text because we have to write a lot of code. In that case, to do it quickly, we can use online tools that convert HTML tags to entities. So, that we can just copy-paste the code which will save time.
All you need to do is just put your HTML code containing tags that you want to display as plain text and the tool will convert all reserved characters in your code with HTML entities in a second.
The great thing about these tools is that these tools also work for all other web and programming languages like JavaScript, CSS, PHP, etc.
Some of the most popular tools to show HTML tags as text that I use mostly for myself are the following.
1. Syntax Highlighter by Hohli
This tool is pretty straightforward and simple to use. All you have to do after landing on the homepage is paste your HTML code and select the language like HTML and hit highlight as shown below.
This will generate HTML code that is converted to HTML entities.
Now, you just have to copy the resultant code as shown below in the image.
Then, paste this into your text editor and save. After that, refresh the webpage and see the output in your browser, it’s working.
But this tool highlights the code too. If you want the output simple without highlighting the code syntax then see the next tool below.
2. HTML Entity Converter by Online-Toolz
This tool simply converts reserved characters present in your HTML code tags to entities. And you can copy and use that code. The demonstration image is shown below.
There are so many other tools you can find online that convert reserved characters and display HTML tags as text. All those tools also work in the same way.
Now, let’s see the next method.
3. Use JavaScript Text Nodes
This method requires some knowledge of JavaScript. However, JavaScript provides us with a great solution to display HTML tags as text on a webpage.
All you have to do is just creating text nodes that contain HTML tags and display them on a webpage. Let’s see how.
The below JavaScript code example will create a text node that will contain HTML paragraph tags to display on a webpage.
<body> <p id="demo"></p> <script> var textNode = document.createTextNode("<p>This is paragraph</p>"); var x = document.getElementById('demo'); x.appendChild(textNode); </script> </body>
In the above code, first I used a document.createTextNode() method to create a text node. Then, I used JavaScript getElementById() method to access the element by its id to show the output inside the paragraph element. The output will look like this in your browser.
Code Output:
4. Other Solutions that are Deprecated
There was an HTML tag called <plaintext> that has been deprecated. So avoid using that in your code if you are running the latest version of HTML. This might cause errors and is not supported in modern browsers.
Lastly, it’s easy to use online tools to do the job quickly and effectively and tools save time. However, JavaScript is also good but you have to understand many things to get the job done.
That’s all. Now, you know all about displaying HTML tags as text. If you have any questions related to this tutorial then don’t hesitate to leave a comment below.
Also, don’t forget to help friends by sharing this helpful tutorial!
Topic: HTML
