HTML Comments & Characters

JavaScript Unicode Escape

<script>
  const copyright = "\u00A9";
  const smile = "\u{1F600}";

  console.log(copyright);
  console.log(smile);
</script>

JavaScript uses Unicode escape syntax inside string literals. The examples above create strings containing © and 😀.

Remember: HTML uses character references such as ©, CSS has its own escape syntax, and JavaScript string literals support escapes such as \u00A9.

13. Character-Encoding Problems and Mojibake

Mojibake is garbled text that appears when bytes are interpreted using the wrong character encoding. It can make otherwise correct content look broken.

For example, a rupee symbol or a non-English word may display as strange characters if a file is saved in one encoding but interpreted using another.

Common Causes

• The HTML file is saved in an encoding different from the one the browser expects.
• The document is missing an appropriate character-encoding declaration.
• A server sends incorrect or conflicting encoding metadata.
• Text is converted incorrectly when moving between databases, files, APIs, or applications.
• A font does not contain the required glyphs, although this is a rendering issue rather than necessarily an encoding issue.

Troubleshooting Checklist

1. Confirm that the source file is saved using UTF-8 in your editor.
2. Check that the HTML includes <meta charset="UTF-8"> near the start of the head.
3. Check the server's HTTP response headers when the page is served over HTTP or HTTPS.
4. Ensure that database connections and storage layers preserve the intended text encoding.
5. Inspect the actual source and DOM to determine whether the text is wrong before or after rendering.
6. Check font support if characters are replaced with missing-glyph boxes.

Do not attempt to fix garbled text by randomly replacing characters. Correct the encoding at the source of the problem whenever possible.

14. Security: Displaying User-Provided Text

Character references are useful for writing HTML, but they should not be treated as a complete security solution for user-provided content.

Suppose a user enters this text:

<script>alert("Hello")</script>

If your application inserts untrusted text directly into an HTML parsing context, the browser may interpret it as markup or executable script rather than ordinary text.

Safer DOM Example

<textarea id="user-input" placeholder="Enter text"></textarea>

<button id="display-button" type="button">Display as Text</button>

<div id="output"></div>

<script>
  const userInput = document.getElementById("user-input");
  const displayButton = document.getElementById("display-button");
  const output = document.getElementById("output");

  displayButton.addEventListener("click", function () {
    output.textContent = userInput.value;
  });
</script>

Here, textContent displays the user's input as text instead of parsing the string as HTML markup.

Avoid assigning untrusted input directly to innerHTML unless the content has been appropriately sanitized for that HTML context.

For server-rendered websites, use your framework's correct escaping mechanism. For rich HTML content, use an established sanitizer and validate data according to the application's requirements.