How to display raw HTML codes as plain text on web pages?
If you are blogger who writes about coding or you own a website where you need to display some sample HTML codes on your webpages, then you might have faced this issue while trying to display HTML code snippets in HTML pages.
Let us suppose you want to display the sample HTML code snippet as shown below
<table>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
When you try to copy and paste this code snippet into your HTML file, you will soon realize that when you try to preview it on the Browser, you will see the HTML table getting rendered on the web page instead of showing the code.
Also, often if you want to mention about any “<tag>”, you will notice the words are not visible on the browser.
This issue happens because when you try to put the HTML code snippets inside an HTML file, the browser tends to identify the code snippet as part of your HTML file code and accordingly render it on the browser.
To avoid rendering the code snippet, you need to use “HTML escaping”.
HTML escaping ensures that the HTML tags and elements are escaped using the equivalent escape characters. This ensures that your code snippets do not get rendered on the HTML page while viewing it in the browser.
The general rule for conversion is given below for reference
| HTML Character | Escaped Character |
|---|---|
| < | < |
| > | > |
| & | & |
| & | & |
| " | " |
| ' | ' |
Let us understand this with an example:
For. e.g. if you have a tag as “<div>”. You need to rewrite it as “<div>” in your HTML code.
Similarly if you have some tags with quotes, you need to escape it using the keyword “"”. For e.g. if you have the code snippet as “<div id=”myId”>”, it needs to be written as “<div id="myId">”.
As you can notice, even though the escaping logic is simple, however in practice, developers tend to work with large amount of code snippet with multiple html elements. Hence, escaping all of these characters one by one is time consuming process and can soon become frustrating.
So, if you have a large amount of HTML code snippets, you can use this Online HTML escaping tool on our website to convert the HTML code snippets with their equivalent escaped code snippets.
One additional Bonus tip:
As part of best practices recommendations, while including code snippets on your web pages, do include them within the “<code>” and/or “<pre>” tags.
I hope you liked reading this article and would definitely like using the HTML Escape tool.
Do share this among your friends and spread the word.
Follow Me on Social Media
Follow @speaktechnologyFREE Sales CRM Software
Fully customizable CRM Software for Freelancers and Small Businesses
Sign up for DigitalOcean Cloud
Get FREE $200 credits, deploy your hobby projects for Free
Sign up for Hostinger Cloud or VPS plans and get upto 20% Discount
