HTML Character Encoding

How HTML Character Encoding Works

HTML character encoding is the process of representing characters that have special meaning in HTML — or that cannot be typed directly — using sequences called HTML entities. Every character that would otherwise be interpreted as part of HTML markup must be encoded before it can be displayed as visible text on a web page. Without encoding, the browser would read an ampersand or angle bracket as the start of an HTML tag or attribute and render the page incorrectly. Encoding ensures that the text content is displayed exactly as intended, regardless of which characters it contains.

HTML Entities Explained

An HTML entity is a short string of text that the browser substitutes for a specific character when rendering the page. Every entity begins with an ampersand (&) and ends with a semicolon (;). Between those two delimiters sits either a descriptive name (called a named entity) or a number (called a numeric entity). For example, the less-than sign < is written as < using its named entity or as < using its decimal numeric entity. When the browser encounters either form, it replaces it with the actual < character in the rendered output. This separation between the source code representation and the visual output is what makes safe HTML text display possible. For a broader set of HTML utilities, see our AI HTML generator and our HTML to text converter.

Named vs Numeric Entities

HTML supports two types of entity references. Named entities use a human-readable keyword, such as & for the ampersand or © for the copyright symbol. They are easier to remember and read in source code, but they only cover a predefined set of characters listed in the HTML specification. Numeric entities, by contrast, can represent any Unicode character by its code point. A decimal numeric entity takes the form &#decimal; — for example, © for the copyright symbol. A hexadecimal numeric entity uses the prefix &#x followed by the hex code point, such as © for the same copyright symbol. Numeric entities are universally supported and can encode the entire Unicode range, making them the safest choice for international characters or symbols that lack a named entity counterpart.

How to Encode HTML Characters in Three Steps

Encoding HTML characters is straightforward with this tool. Whether you are preparing text for display inside an HTML page, preventing browser misinterpretation of special symbols, or handling user-generated content safely, the process follows three consistent steps regardless of the text you are working with.

Step-by-Step: Encoding and Decoding HTML Entities

Common HTML Entities

The five characters that must always be encoded in HTML content are the ampersand (&), less-than sign (<), greater-than sign (>), double quotation mark ("), and single quotation mark ('). Beyond those five, frequently used named entities include   for non-breaking spaces, © for the copyright symbol, ® for the registered trademark symbol, ™ for the trademark sign, — for the em dash, and … for the ellipsis. The entity reference table in the tool above shows these and more at a glance.

Who Needs HTML Character Encoding

HTML character encoding is not just a concern for experienced web developers. Anyone who creates or manages web content, writes code tutorials, handles user-submitted data, or builds web applications encounters situations where encoding is required. Understanding when and why to encode characters helps prevent broken layouts, security vulnerabilities, and rendering errors across different browsers and environments.

Displaying Code in HTML

Technical writers, documentation authors, and developers who publish code examples on web pages must encode angle brackets and other HTML-significant characters. If you paste <div class="example"> directly into HTML source, the browser will treat the angle brackets as real tags and render the code snippet incorrectly. Encoding transforms the snippet to <div class="example">, which the browser then displays as the literal text you intended. This is essential for code blocks inside <pre> and <code> elements. See also our AI code converter for additional code-handling utilities.

Preventing XSS Attacks

Cross-site scripting (XSS) is a class of security vulnerability where malicious users inject script tags or event handler attributes into a web page through input fields, URL parameters, or database content. When user-supplied content is rendered in HTML without encoding, an attacker can inject <script>alert('XSS')</script> or similar payloads that execute in other users' browsers. Properly encoding all user input before inserting it into HTML neutralises these injections by converting the angle brackets into < and >, which the browser displays as text rather than executing as code. HTML character encoding is a foundational output-encoding defence that every web application should apply consistently to user-controlled data.

Special Characters in Web Content

Content editors, bloggers, and e-commerce managers regularly need to include special characters that are not on a standard keyboard or that have ambiguous behaviour in HTML. Currency symbols, mathematical operators, diacritical marks, arrows, and typographic characters such as em dashes and curly quotes all benefit from entity encoding to guarantee consistent rendering across browsers and operating systems. While modern browsers handle UTF-8 encoded characters reliably when the document declares <meta charset="UTF-8">, entity encoding remains the safest way to ensure characters display correctly in legacy environments, email clients, and third-party platforms that may not honour the character set declaration. For further text processing after encoding, our remove line breaks tool can clean up line break characters, and the free AI text tools hub offers a full range of text utilities.

Real-World Examples

Seeing HTML character encoding applied to concrete situations helps clarify when and how to use it. The three examples below cover the most common encoding and decoding scenarios encountered in everyday web development and content work.

Example 1 — Encoding Angle Brackets for Code Display

Suppose you are writing a tutorial that explains how the HTML paragraph tag works. You want to display the text <p>Hello</p> visibly on the page. If you type this directly into your HTML, the browser will parse it as an actual paragraph element, not as text. To display it correctly, you encode the angle brackets: the source becomes <p>Hello</p>. Paste your example code into the encoder above, select "Encode to HTML entities" and "Named entities only", click Encode, and the correct entity form is returned immediately for use in your documentation.

Example 2 — Encoding Special Symbols

An e-commerce product page needs to display a price with a registered trademark symbol and an em dash: BrandName® — Premium Edition. If the database or CMS stores the content as plain text, the special characters need to be encoded before insertion into the HTML template. The encoder converts ® to ® and — to —. Selecting "Encode all (numeric entities)" instead would produce ® and —, which achieves the same visual result while using universal numeric references that work regardless of which named entities the target system supports.

Example 3 — Decoding HTML Entities to Text

When pulling content from an API, RSS feed, or legacy database, you may receive strings with HTML entities already embedded — for example, Tom & Jerry — Classic Cartoons. Before using this text in a plain text context such as a CSV export, email subject line, or analytics report, the entities need to be decoded back to their actual characters: Tom & Jerry — Classic Cartoons. Paste the entity-encoded text, select "Decode from HTML entities", and click Encode/Decode to get the readable plain text output instantly.

Frequently Asked Questions