What this tool can do for you

This tool can help you work with HTML code in a few different ways. For example, you can use it to encode your HTML code and then display it on an HTML document, which is useful if you want to show off the code itself.

Alternatively, if you already have encoded HTML code, you can use this tool to decode it and view how it actually looks or even use it as actual HTML code.

Sometimes, HTML code can take up unnecessary space. No worries, this tool can also help minify the code to remove those extra bytes.

And last but not least, reading through chunks of code can be daunting. So, this tool can also help beautify your HTML code to make it more readable and easier on the eyes.

Steps on how to use this tool

  • First, copy and paste your HTML code into the input field.
  • If you want the code to be automatically updated after making changes, select the "Auto update" option. This will automatically encode or decode your code and display the result in the "Output" field.
  • If you want to encode your code, simply click on the "Encode" button.
  • If you need to decode encoded HTML code, click on the "Decode" button.
  • Want to swap the input and output fields? Just click on the "Swap" button.
  • If you want to format the HTML code in the input field, click on the "Beautify" button.
  • If you need to remove the white spaces from your code, click on the "Minify" button.
  • If you want to start over, simply click on the "Clear" button to empty the input field.

How to Encode and Decode HTML entities with JavaScript

Certain characters like <, >, or & can cause unexpected issues or errors when you try to display them on your website. HTML entities are the solution to this problem.

HTML entities are special characters used to represent reserved characters in HTML code. They ensure that everything is displayed correctly on your webpage, without causing any unexpected behavior. For instance, if you want to display the < character on your webpage, you need to use the &lt; instead.

As a web developer, it's crucial to understand the importance of HTML entities and how to use them correctly. You may come across situations where you need to encode or decode HTML entities. For example, when you're building a form that allows users to enter text, you need to encode the text to ensure that any special characters are correctly represented in the HTML code. On the other hand, if you're retrieving data from a database or an external source, you may need to decode the HTML entities to display the data correctly on your webpage.

If you want to encode HTML to entities, you can use the following JavaScript code:

function encodeHTML(str) {
  var temp = document.createElement('textarea');
  temp.innerText = str;
  return temp.innerHTML;
}

And to decode HTML entities, you can use the following JavaScript code:

function decodeHTML(str) {
  var temp = document.createElement('textarea');
  temp.innerHTML = str;
  return temp.value;
}

How to Beautify your HTML code using JavaScript

Want to make your HTML code look formatted? There are JavaScript libraries out there that can help you with that, such as js-beautify library.

First, you'll need to add the js-beautify library to your HTML document. You can do this by adding the following script tag to your document:

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.7/beautify-html.min.js"></script>

Once you've added the library, you can use its html_beautify function to beautify your HTML code. Here's an example:

const beautifedHTML = html_beautify(
  '<div>Sample HTML</div>',
  { indent_size: 2 },
);

In this example, we're beautifying the HTML code with an indentation size of 2 spaces. You can customize the beautification process with other options as well - just check out the js-beautify documentation for more details.