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>
<p>Ampersand: &</p>
<p>Less than: <</p>
<p>Greater than: ></p>
<p>Quote: "</p>
<p>Non-breaking space: </p>
<p>Euro: €</p>
<p>Pound: £</p>
<p>Copyright: ©</p>
<p>Registered: ®</p>
<p>Trademark: ™</p>
<p>Plus-minus: ±</p>
<p>Multiplication: ×</p>
<p>Division: ÷</p>
<p>Left arrow: ←</p>
<p>Right arrow: →</p>
<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.