In the world of the web, how information is represented and transmitted is key. However, for beginners, it may feel a bit complex to understand how characters and symbols are handled and interpreted in a digital environment. That’s where the processes of encoding and decoding become important.

In this article, we focus on fundamental yet essential encoding methods such as HTML, URL, and Unicode. We explain how they work and why they matter. In addition, we provide JavaScript sample code that even beginners can easily copy and paste to try out each encoding/decoding method.

We hope this guide will help you take your first step into web development. Now, let’s explore the world of encoding and decoding together!

Contents
  1. What Are HTML Encoding and Decoding?
  2. What Are URL Encoding and Decoding?
  3. What Are Unicode Encoding and Decoding?
  4. HTML, URL, and Unicode Encoding/Decoding Conversion Demo Page Using JavaScript
  5. Important Notes
  6. Summary

What Are HTML Encoding and Decoding?

HTML encoding is the process of converting characters that have special meanings in HTML (for example, < and &) into special codes (for example, &lt; and &amp;) instead of using the characters themselves. This prevents browsers from interpreting these characters as HTML tags or entities. Decoding is the reverse process.

HTML Encoding/Decoding Conversion: HTML & JavaScript Code

By copying and pasting the following code, you can implement functionality that outputs text after HTML encoding or decoding conversion.

HTML Code

<h2>HTML Encode or Decode Conversion</h2>
<textarea type="text" id="input" placeholder="Enter text to HTML encode or decode" rows="6" cols="36"></textarea>
<br>
<button onclick="document.getElementById('output').textContent = htmlEncode(document.getElementById('input').value)">HTML Encode ↓</button>
<button onclick="document.getElementById('output').textContent = htmlDecode(document.getElementById('input').value)">HTML Decode ↓</button>
<br>
<textarea id="output" placeholder="HTML encode/decode result" rows="6" cols="36"></textarea>

JavaScript Code

<script>
//HTML Encode
function htmlEncode(str) {
  var div = document.createElement('div');
  div.appendChild(document.createTextNode(str));
  return div.innerHTML;
}
//HTML Decode
function htmlDecode(str) {
  var div = document.createElement('div');
  div.innerHTML = str;
  return div.innerText;
}
</script>

What Are URL Encoding and Decoding?

URL encoding is the process of converting certain characters included in a URL into percent-encoding (for example, a space becomes %20). This allows characters to be safely transmitted within a URL. Decoding is the process of converting the encoded characters back to their original form.

URL Encoding/Decoding Conversion: HTML & JavaScript Code

By copying and pasting the following code, you can implement functionality that outputs text after URL encoding or decoding conversion.

HTML Code

<h2>URL Encode or Decode Conversion</h2>
<textarea type="text" id="urlInput" placeholder="Enter text to URL encode or decode" rows="6" cols="36"></textarea>
<br>
<button onclick="document.getElementById('urlOutput').textContent = urlEncode(document.getElementById('urlInput').value)">URL Encode ↓</button>
<button onclick="document.getElementById('urlOutput').textContent = urlDecode(document.getElementById('urlInput').value)">URL Decode ↓</button>
<br>
<textarea id="urlOutput" placeholder="URL encode/decode result" rows="6" cols="36"></textarea>

JavaScript Code

<script>
//URL Encode
function urlEncode(str) {
  return encodeURIComponent(str);
}
//URL Decode
function urlDecode(str) {
  return decodeURIComponent(str);
}
</script>

What Are Unicode Encoding and Decoding?

Unicode encoding is the process of converting a text string into its Unicode representation. This allows various languages and symbols to be represented in a unified format. Decoding is the process of converting the Unicode representation back to the original string.

Unicode Encoding/Decoding Conversion: HTML & JavaScript Code

By copying and pasting the following code, you can implement functionality that outputs text after Unicode encoding or decoding conversion.

HTML Code

<h2>Unicode Encode or Decode Conversion</h2>
<textarea type="text" id="unicodeInput" placeholder="Enter text to Unicode encode or decode" rows="6" cols="36"></textarea>
<br>
<button onclick="document.getElementById('unicodeOutput').textContent = unicodeEncode(document.getElementById('unicodeInput').value)">Unicode Encode ↓</button>
<button onclick="document.getElementById('unicodeOutput').textContent = unicodeDecode(document.getElementById('unicodeInput').value)">Unicode Decode ↓</button>
<br>
<textarea id="unicodeOutput" placeholder="Unicode encode/decode result" rows="6" cols="36"></textarea>

JavaScript Code

<script>
//Unicode Encode
function unicodeEncode(str) {
  return escape(encodeURIComponent(str));
}
//Unicode Decode
function unicodeDecode(str) {
  return decodeURIComponent(unescape(str));
}
</script>

HTML, URL, and Unicode Encoding/Decoding Conversion Demo Page Using JavaScript

You can check the implemented HTML, URL, and Unicode encoding/decoding conversion processes from the demo page below.

HTML, URL, and Unicode Encoding/Decoding Conversion Demo Page Using JavaScript

Important Notes

  • You need to choose the appropriate encoding and decoding method for each specific context. Selecting the wrong method may result in data not being transmitted correctly.
  • For security reasons, special care is required when processing user input as-is. To prevent vulnerabilities such as XSS (Cross-Site Scripting), it is important to apply proper encoding.

Summary

In this article, we explained HTML, URL, and Unicode encoding and decoding. These technologies are extremely important in web development and are essential knowledge for handling data correctly and securely. Use the sample code above as a reference and try applying it in your own projects.

　
*If you use this content as a reference, please do so at your own responsibility.
Do not reuse the Google Analytics tag included in the demo page head tag.*

Decoding Encoding