Repository navigation
Expand file tree
/
Copy pathhtml-encoder.html
More file actions
124 lines (118 loc) · 7.44 KB
/
Copy pathhtml-encoder.html
File metadata and controls
124 lines (118 loc) · 7.44 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<script type="application/ld+json">
{"@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{"@type": "ListItem", "position": 1, "name": "Web Dev Toolkit", "item": "https://pyfile-toolkit.github.io/web-toolkit/"}, {"@type": "ListItem", "position": 2, "name": "HTML Entity Encoder/Decoder Tool", "item": "https://pyfile-toolkit.github.io/web-toolkit/html-encoder.html"}]}
</script>
<meta property="og:title" content="HTML Entity Encoder/Decoder — Free Online Tool">
<meta property="og:description" content="Encode and decode HTML entities online. Escape <, >, & and all special characters instantly.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://pyfile-toolkit.github.io/web-toolkit/html-encoder.html">
<meta property="og:image" content="https://pyfile-toolkit.github.io/web-toolkit/og-image.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML Entity Encoder/Decoder — Free Online Tool">
<meta name="twitter:description" content="Encode and decode HTML entities online. Escape <, >, & and all special characters instantly.">
<meta name="twitter:image" content="https://pyfile-toolkit.github.io/web-toolkit/og-image.png"><link rel="icon" href="favicon.ico" sizes="any">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-RDDV2FW9HY"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-RDDV2FW9HY');
</script>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Entity Encoder/Decoder — Free Online Tool</title>
<link rel="canonical" href="https://pyfile-toolkit.github.io/web-toolkit/html-encoder.html">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "HTML Entity Encoder/Decoder",
"operatingSystem": "ANY",
"applicationCategory": "UtilitiesApplication",
"description": "Encode and decode HTML entities online.",
"offers": {"@type": "Offer", "price": "0", "priceCurrency": "USD"}
}
</script>
<meta name="description" content="Encode and decode HTML entities online. Escape <, >, & and all special characters instantly.">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:system-ui,sans-serif;background:#0f172a;color:#e2e8f0;display:flex;;;min-height:100vh;padding:20px}
.card{background:#1e293b;border-radius:16px;padding:32px;max-width:550px;width:100%}
h1{color:#f8fafc;text-align:center;margin-bottom:4px}
.sub{color:#94a3b8;text-align:center;margin-bottom:20px;font-size:.9rem}
textarea{width:100%;padding:12px;border-radius:8px;background:#334155;color:#e2e8f0;border:1px solid #475569;font-family:monospace;font-size:.9rem;resize:vertical;min-height:100px;margin-bottom:12px}
.btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
button{padding:10px 24px;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-size:.95rem}
.btn-enc{background:#6366f1;color:#fff}
.btn-dec{background:#22c55e;color:#fff}
.btn-copy{background:#64748b;color:#fff}
.result{margin-top:16px}
.result label{color:#94a3b8;font-size:.85rem}
.ads{margin-top:16px;padding:12px;background:#1e1e3a;border-radius:8px;text-align:center;font-size:.85rem}
.ads a{color:#818cf8}
.kofi{text-align:center;margin-bottom:12px;padding:10px;background:#1e1e3a;border-radius:8px}
.kofi a{color:#ff5e5b;font-weight:600;text-decoration:none}
.content{margin-top:28px;max-width:720px;margin-left:auto;margin-right:auto;padding:0 6px}
.content h2{color:#f8fafc;font-size:1.25rem;margin:24px 0 10px}
.content p{color:#cbd5e1;line-height:1.6;margin-bottom:12px;font-size:.95rem}
.content strong{color:#e2e8f0}
@media(max-width:520px){
.container{padding:20px 14px}
.tool-card{padding:16px}
body{padding:12px!important}
.card{padding:18px!important;max-width:100%!important}
.content h2{font-size:1.05rem}
.item{padding:16% 0}
.item .shape{font-size:2.2rem}
}
@media(max-width:380px){
.item{padding:13% 0}
.item .shape{font-size:1.9rem}
.hud{flex-wrap:wrap;gap:4px}
}
</style>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What is &#60;?","acceptedAnswer":{"@type":"Answer","text":"It is the entity for the less-than symbol."}},{"@type":"Question","name":"Is encoding reversible?","acceptedAnswer":{"@type":"Answer","text":"Yes, decode converts entities back."}},{"@type":"Question","name":"Is my content uploaded?","acceptedAnswer":{"@type":"Answer","text":"No, local only."}}]}</script>
<link rel="stylesheet" href="assets/styles.css">
<script src="assets/site.js" defer></script>
</head>
<body>
<div class="card">
<h1>HTML Entity Encoder / Decoder</h1>
<p class="sub">Escape HTML tags or decode entities back to characters</p>
<textarea id="input" placeholder="<div>Hello & welcome!</div>"></textarea>
<div class="btns">
<button class="btn-enc" onclick="encode()">🔒 Encode</button>
<button class="btn-dec" onclick="decode()">🔓 Decode</button>
<button class="btn-copy" onclick="copy()">📋 Copy</button>
</div>
<div class="result">
<label>Result:</label>
<textarea id="output" readonly style="min-height:100px"></textarea>
</div>
<div class="kofi"><a href="https://ko-fi.com/pyfiletoolkit">☕ Support on Ko-fi</a></div>
<div class="ads">
<a href="https://pyfile-toolkit.github.io/web-toolkit/">← Toolkit</a> |
<a href="https://pyfiletoolkit.gumroad.com/">Premium</a>
<a href="https://pyfile-toolkit.github.io/web-toolkit/youtube-tag-generator.html">YouTube Tags</a>
· <a href="privacy.html">Privacy</a> · <a href="about.html">About</a></div>
</div>
<script>
const inp=document.getElementById('input'),out=document.getElementById('output');
const entities={'"':'"','&':'&','<':'<','>':'>'};
function encode(){
out.value=inp.value.replace(/[&<>"]/g,c=>entities[c]||c);
}
function decode(){
const txt=document.createElement('textarea');txt.innerHTML=inp.value;out.value=txt.value;
}
function copy(){out.select();navigator.clipboard.writeText(out.value)}
</script>
<div class="related" style="font-family:system-ui;font-size:.85rem;color:#64748b;text-align:center;margin-top:14px">More tools: <a href="url-encoder.html">Url Encoder</a> · <a href="base64.html">Base64</a> · <a href="json-formatter.html">Json Formatter</a> · <a href="case-converter.html">Case Converter</a></div>
<div class="content"><h2>What is HTML Encoding?</h2><p>HTML encoding converts special characters (<, >, & and quotes) into entities so they display as text instead of being parsed as code. This is essential for escaping user input safely.</p><h2>How to encode HTML entities</h2><p>Paste HTML or text and click encode to convert special characters to entities, avoiding XSS and rendering issues. Everything runs locally in your browser.</p><h2>Why encode HTML</h2><p>Escaping user-generated content prevents cross-site scripting (XSS) attacks and broken layouts. It is a core security practice for web developers.</p><h2>HTML encoding FAQ</h2><p><strong>What is &#60;?</strong> It is the entity for the less-than symbol. <strong>Is encoding reversible?</strong> Yes, decode converts entities back. <strong>Is my content uploaded?</strong> No, local only.</p></div>
<div id="crypto-donate"></div>
<script src="donate.js"></script>
</body>
</html>