Learning objectives
Escape HTML syntax characters; declare and preserve UTF-8; encode URL components without confusing them with HTML attributes.
Prerequisites
Understand document metadata, links, and code examples displayed inside HTML.
Three encoding problems need three different answers
Character encoding maps bytes to text. UTF-8 is the normal choice for modern HTML documents, and the file’s actual encoding must agree with its declaration. If a document is saved using one encoding and decoded using another, punctuation and non-Latin text can become corrupted. Replacing every visible character with an entity is not the right repair for an incorrectly encoded file.
HTML character references represent characters in source markup. Named references include & for an ampersand and < for a less-than sign. Numeric references use a character’s code point in decimal or hexadecimal. They are useful when a character would otherwise be interpreted as syntax, or when a particular invisible character needs to be explicit in source.
Escape for the context where the value appears
To display <h1> as text inside a code element, escape the opening angle bracket rather than inserting a real heading. An ampersand that begins a reference must also be handled correctly. In quoted attribute values, escape the quote character that would terminate the value. Prefer a framework or language’s context-appropriate escaping function when inserting data dynamically.
Escaping HTML text is not the same as making an arbitrary URL safe. A string can be correctly escaped for an attribute while still using an unwanted URL scheme. Validate the intended kind of value, then escape it for its output context. Likewise, JavaScript strings, CSS values, and HTML text each have different parsing rules.
A non-breaking space prevents a line break at that position. It can be useful in a short unit expression, but repeating non-breaking spaces to align columns creates brittle layout. Use CSS for spacing and actual table structure for tabular relationships.
Build URLs from components
Percent-encoding represents bytes in URL components. A space in a query value should be encoded through a URL-building API rather than hand-concatenated into a string. The URL and URLSearchParams APIs help keep the path, query, and fragment separate. Encoding an entire URL as if it were one query value destroys its structural separators.
When a URL containing query parameters appears in HTML source, its ampersand separators should be escaped for the HTML attribute context. The browser resolves the character reference back to an ampersand before using the URL. This is a second layer of representation, not a different destination.
Test multilingual text from file save through server response to rendering. A working English-only sample can hide encoding defects that appear as soon as a learner enters an accented name or a different writing system.
Working example
<p>Use <code><button></code> for an action.</p>
<p>Research & development</p>
<p>The room is 20 m wide.</p>
<p>हिन्दी · العربية · 日本語</p>Another example
<a href="/search/?topic=html&level=advanced">Advanced HTML results</a>
<pre><code><p>Hello &amp; welcome</p></code></pre>Expected output
The first example displays literal tag brackets, an ampersand, a non-breaking unit expression, and multilingual text. The second link contains two query parameters after HTML parsing, while its code block displays a source-level entity.
Common mistakes
Do not double-escape text accidentally, or assume HTML escaping validates a URL scheme. Do not use a sequence of non-breaking spaces as a grid. Do not change a charset declaration without converting the file’s bytes to match.
Accessibility and browser notes
Use real Unicode text when practical and declare the correct language for passages. Symbols and emoji can have verbose or unexpected spoken names, so do not use an unexplained symbol as the only control label. Invisible characters deserve careful review in copied content.
Practice
Display the literal source <p>Tea & coffee</p> inside a code block without creating a real paragraph.
Review the solution and reasoning
<pre><code><p>Tea & coffee</p></code></pre>The outer pre and code elements are real markup. The inner brackets and ampersand are escaped so the browser displays the intended source as text. If you wanted to teach the entity & itself, its ampersand would need another layer of escaping.