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 &#60; for less than a symbol.

Here, is the list of the most popular HTML Entities below.

CharacterEntity NameEntity NumberDescription
<&lt;&#60;less than
>&gt;&#62;greater than
&quot;&#34;double quotation marks
&apos;&#39;single quotation mark
&nbsp;&#160;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.

&#60;h1&#62;This is Heading&#60;/h1&#62;

In your browser, it will display HTML tags as text instead of just “This is paragraph” as shown below.

HTML tags as text example

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.

HTML entities converter

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.

Copy HTML code

Then, paste this into your text editor and save. After that, refresh the webpage and see the output in your browser, it’s working.

HTML Tags as Plain Text

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.

HTML Tags to Entities Converter Tool

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.

<p id="demo"></p>
    var textNode = document.createTextNode("<p>This is paragraph</p>");
    var x = document.getElementById('demo');

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:

HTML tags as text

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!