HTML Encoding

Character encoding, special characters, entities, and internationalization.

Overview

Proper encoding ensures text displays correctly across browsers and devices.

Key Concepts

UTF-8 — Universal character encoding
HTML Entities — Special character codes
Named Entities — &, <, >
Numeric Entities — A for 'A'
Escaping — Prevent XSS attacks

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Encoding</title>
</head>
<body>
  <!-- Special characters -->
  <p>Ampersand: &amp;</p>
  <p>Less than: &lt;</p>
  <p>Greater than: &gt;</p>
  <p>Quote: &quot;</p>
  <p>Non-breaking space: &nbsp;</p>
  
  <!-- Currency and symbols -->
  <p>Euro: &euro;</p>
  <p>Pound: &pound;</p>
  <p>Copyright: &copy;</p>
  <p>Registered: &reg;</p>
  <p>Trademark: &trade;</p>
  
  <!-- Mathematical symbols -->
  <p>Plus-minus: &plusmn;</p>
  <p>Multiplication: &times;</p>
  <p>Division: &divide;</p>
  
  <!-- Arrow symbols -->
  <p>Left arrow: &larr;</p>
  <p>Right arrow: &rarr;</p>
  
  <!-- User-generated content (escaped) -->
  <div id="userContent"></div>
  
  <script>
  // Properly escape HTML
  function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }
  
  // XSS prevention
  const userInput = '<script>alert("XSS")<\/script>';
  const safeContent = escapeHtml(userInput);
  document.getElementById('userContent').textContent = safeContent;
  
  // Encoding/decoding
  const encoded = encodeURIComponent('Hello World!');
  const decoded = decodeURIComponent(encoded);
  
  // Base64 encoding
  const base64 = btoa('Hello World!');
  const decoded64 = atob(base64);
  </script>
</body>
</html>

Practice

Build a text encoder/decoder tool with HTML entity support.