App Icon

HTML Encoding

Back to Home

Overview

HTML Encoding is a method of representing special characters in HTML documents using character entities. These entities ensure that characters are displayed correctly in web browsers and prevent parsing errors. HTML encoding uses either named entities (like &) or numeric entities (like &).

Technical Details

Entity Types

  • Named entities: &, <, >
  • Decimal entities: &, <, >
  • Hexadecimal entities: &, <, >
  • Unicode entities: &#x1F600;

Key Features

  • Prevents XSS attacks
  • Ensures proper rendering
  • Supports all Unicode characters
  • Browser compatible

Common Uses

  • Displaying special characters
  • Preventing code injection
  • Internationalization
  • Accessibility

Examples

HTML Encoding Examples

Original: 
Hello

Encoded: <div>Hello</div>

Original: "Quote"
Encoded: "Quote"

Original: © 2024
Encoded: © 2024

Original: 😊
Encoded: 😊

Implementation

JavaScript Example

// Using DOMParser for encoding
function encodeHTML(str) {
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
}

// Using a simple replace function
function encodeHTMLSimple(str) {
    return str
        .replace(/&/g, '&')
        .replace(//g, '>')
        .replace(/"/g, '"')
        .replace(/'/g, ''');
}

// Example usage
const text = '
Hello "World" & Friends
';
const encoded = encodeHTML(text);
console.log(encoded); // "<div>Hello "World" & Friends</div>"

// Decoding
function decodeHTML(str) {
    const div = document.createElement('div');
    div.innerHTML = str;
    return div.textContent;
}

const decoded = decodeHTML(encoded);
console.log(decoded); // "
Hello "World" & Friends
"

References