HTML Encoder and Decoder Online

Paste a code sample into a web page without escaping it and the browser runs the markup instead of showing it. Kwebby's HTML Encoder converts the characters that HTML treats as syntax (angle brackets, ampersands and quotes) into entities, so they display as plain text. The decoder reverses the process when you need readable text from an encoded string. This guide covers how the tool works, when to encode, and where encoding stops being enough.

Key Takeaways

• Kwebby's HTML Encoder turns <, >, & and quotes into HTML entities such as < and &, and the decoder converts them back to text.
• The tool has an Input box, an Output box, and Copy, Clear and Swap buttons, so a full round trip takes a few seconds.
• Both directions run in your browser, so no text is sent to a server.
• Encoding untrusted text before it reaches an HTML page is a core defense against cross-site scripting (XSS), but each output context needs its own method.
• Encode once, at output time. Encoding twice turns & into & and shows raw codes to readers.
• The tool is free and needs no account.

What Is the Kwebby HTML Encoder?

Kwebby's HTML Encoder is a free online tool that converts special characters into HTML entities and converts entities back into plain text. HTML entities, also called character references, are escape sequences that let a page show characters the browser would otherwise read as markup.

MDN describes three forms: a named reference such as <, a decimal reference such as <, and a hexadecimal reference such as <. All three produce the same character in the browser.

Key Features and How It Works

Encode and decode in one tool

The tool has an encode mode and a decode mode. Encode mode converts &, <, >, double quotes and single quotes into &, <, >, " and '. Tick "Also encode non-ASCII characters" to turn accented letters, symbols and emoji into hex references too, so é becomes é. Decode mode reads named, decimal and hexadecimal references in one pass and turns them back into text. The result updates as you type, with no button to press.

Input, Output, Copy, Clear and Swap

You paste text into the Input box and read the converted text in the Output box. Copy sends the output to your clipboard, and Clear empties the boxes. Swap moves the output into the input and switches the mode, which makes a round-trip check easy: encode, click Swap, and compare the decoded result with your original.

No server round trip

Both directions work instantly in your browser, with no data sent to any server. That suits draft copy and internal markup you would rather not upload. Even so, keep passwords and API keys out of any web page.

A built-in entity reference

Under the tool, a short reference lists the most common entities: < and > for angle brackets, & for the ampersand, " and ' or ' for quotes,   for a non-breaking space, and named entities for symbols and accented letters such as ©, ®, é and €. For the full table, open HTML Character Codes.

Why HTML Encoding Matters

HTML encoding stops characters that act as syntax from being read as syntax. Two things break without it. Visible content breaks, because a stray < can make the browser treat the following words as a tag. Security breaks too, because untrusted text that reaches a page unencoded can carry a script that runs in a visitor's browser. That attack is called cross-site scripting, or XSS.

The OWASP XSS Prevention Cheat Sheet tells developers to use HTML entity encoding for untrusted data placed in the HTML body. It lists this mapping for the five characters that matter most:

Kwebby's encoder writes the single quote as ', the decimal form of the same reference, and produces the other four exactly as listed.

The same cheat sheet warns that using the wrong encoding method for a context can introduce weaknesses. HTML encoding protects HTML text. It does not protect a value placed inside a script block or a URL.

How to Use the HTML Encoder

1. Choose a mode. Select encode to turn special characters into entities, or decode to turn entities back into text.
2. Paste your text. Put the text or HTML code in the Input box.
3. Read the Output. The converted text appears in the Output box.
4. Copy the result. Click Copy, then paste the output into your page, template or editor.
5. Check the round trip. Click Swap to move the output into the input and switch modes, then confirm you get your original text back.
6. Start again. Click Clear when you want to work on new text.

Best Practices for HTML Encoding

Encode once, at output time

Encode text when you write it into the page, and do it one time. A second pass turns & into &, and readers then see raw codes such as & in the middle of a sentence. If you spot that, decode once and find the second encoding step in your code.

Match the encoding to the context

Text inside the HTML body and inside quoted attribute values needs HTML encoding. Text placed in a URL needs percent-encoding, which the URL Encoder/Decoder handles. Text inside a script block needs yet another method. Mixing them up is the most common source of encoding bugs.

Quote every attribute value

A value without quotes ends at the first space, which lets extra attributes slip in. OWASP recommends wrapping attribute values in quotation marks, and encoding the quote characters inside the value keeps the attribute intact.

Decode for reading, not for inserting

Decoding is useful when you read logs, exports or copied markup. Do not take decoded text from an untrusted source and write it into a page, because that restores the angle brackets you encoded.

Common mistakes to avoid

• Encoding a whole page you meant to render, which shows every tag as visible text.
• Encoding text that is already encoded.
• Assuming one encoding step protects every context on the page.
• Pasting secrets into any online tool.

Common Use Cases

• Code samples in tutorials. Encode a snippet so the browser shows <div> instead of creating a div.
• User comments and form entries. Check how a string with angle brackets and quotes looks once encoded before you write it to a template.
• Attribute values. Encode text that contains quotes before you place it in a title or value attribute.
• Reading encoded exports. Decode a string full of < and & so you can read it.
• Teaching and debugging. Compare the named, decimal and hexadecimal forms of one character.

Related Kwebby Tools

• URL Encoder/Decoder percent-encodes query strings and URLs. Use it when your text goes into a link, not into page text.
• HTML Character Codes lists the name, decimal code and hex code for each entity, with a search box. Use it to find a symbol the encoder does not need to touch.
• HTML Compressor minifies markup after you finish editing, so your encoded snippets ship in a smaller file.
• Decimal to ASCII converts decimal character values to characters, which helps when you read numeric references.
• Free Developer Tools Online collects the rest of the encoding, minifying and hashing tools on Kwebby.

Final Thoughts

HTML encoding is a small step that prevents two big problems: broken pages and unescaped input. Kwebby's HTML Encoder gives you both directions in one screen, with Copy, Clear and Swap to speed up the check. Paste your next snippet in, encode it, and run the round trip before you publish. Then browse the other developer tools for the rest of your markup workflow.