HTML Comments & Characters

Section 6: Comments, Entities, Unicode and Special Characters

Welcome to Section 6 of Codementrix HTML5 Mastery. In this lesson, you will learn how to write HTML comments, display reserved characters safely, use named and numeric character references, understand Unicode and UTF-8, and avoid common encoding problems when building multilingual websites.

These concepts are particularly important when writing code examples, displaying prices and mathematical symbols, creating technical blogs, supporting Odia and other languages, and preventing HTML characters from being interpreted incorrectly.

1. Learning Objectives

By the end of this lesson, you will be able to:

• Write valid HTML comments and understand their limitations.
• Explain why character references are needed for certain characters.
• Use named, decimal, and hexadecimal character references.
• Display reserved characters such as less-than, greater-than, and ampersand.
• Understand Unicode, code points, and UTF-8 encoding.
• Display symbols, emoji, accented characters, and multilingual text correctly.
• Recognize common character-encoding problems such as mojibake.
• Distinguish HTML character references from CSS escapes and JavaScript escape sequences.
• Use safe output techniques when displaying user-provided text.

2. HTML Comments

HTML comments allow developers to add notes to the HTML source. They can explain a section of code, identify a temporary development area, or leave instructions for another developer.

Basic Syntax

<!-- This is an HTML comment -->

The browser does not normally display the comment as visible page content.

Example: Comments in a Web Page

<!-- Main page heading -->
<h1>Welcome to Codementrix</h1>

<!-- Introduction section -->
<p>Learn practical web development tutorials.</p>

The comments explain the purpose of the following elements. The visible page contains the heading and paragraph, but not the comment text.

Commenting Out HTML During Development

You can temporarily comment out a section of markup while testing a page.

<h2>Available Courses</h2>

<!--
<ul>
  <li>HTML5 Mastery</li>
  <li>CSS Mastery</li>
</ul>
-->

The list inside the comment is not parsed as ordinary visible HTML elements while the comment remains intact.

However, commented-out content is still present in the delivered source. Do not use comments to protect confidential information, API keys, passwords, or private business data.

Important Comment Rules

• Begin a comment with <!--.
• End a comment with -->.
• Comments are not displayed as ordinary page content.
• Comments can be inspected in the page source or Developer Tools.
• HTML comments cannot be nested reliably.
• A comment must not contain the character sequence -- internally.
• Avoid placing comments inside a tag's attribute list.

Incorrect: Nested Comments

<!-- Outer comment
  <!-- Inner comment -->
Outer comment continues -->

This is not a reliable way to create nested comments. The inner closing delimiter can terminate the outer comment unexpectedly, causing malformed markup or unexpected visible text.

Use a single comment instead:

<!-- Notes about the course section go here. -->

Comments and Security

Comments are not a security boundary. A user can inspect the source delivered to their browser. Never put secrets, passwords, private tokens, internal credentials, or sensitive personal information in HTML comments.

Best practice: Write comments that explain why code exists when the purpose is not obvious. Avoid comments that merely repeat what the code already says.

3. What Are Special Characters in HTML?

Some characters have a special meaning in HTML markup. For example, angle brackets identify tags, while the ampersand begins a character reference in relevant contexts.

Consider this text:

5 < 10

If you want to display the less-than symbol as text inside ordinary HTML content, use a character reference:

<p>5 &lt; 10</p>

The browser displays:

5 < 10

Similarly, to display a greater-than symbol, you can use >. To display an ampersand, use &.

Common HTML Character References

HTML defines many more named character references. Use them when they improve readability or when the character would otherwise conflict with HTML syntax.

4. Named Character References

A named character reference uses a predefined name that begins with an ampersand and usually ends with a semicolon.

Syntax

&name;

Examples

<p>Copyright &copy; 2026 Codementrix</p>

<p>HTML &amp; CSS</p>

<p>Price: &euro;99</p>

<p>This value is &lt; 100</p>

The browser displays the corresponding characters:

• Copyright © 2026 Codementrix
• HTML & CSS
• Price: €99
• This value is less than 100

Why the Semicolon Matters

Use the semicolon after a named character reference whenever possible. Some references have historical parsing rules that allow omission in certain contexts, but the result can be ambiguous or change depending on what follows.

Prefer:

©

When writing HTML that should display the literal text ©, the ampersand itself must be represented as a character reference.

For normal HTML content, write the actual character reference directly in the source:

<p>Copyright &copy; 2026</p>

This renders the copyright symbol rather than the literal sequence of characters ©.

5. Decimal and Hexadecimal Numeric Character References

Unicode characters can also be represented by numeric character references. This is useful when you do not know a named reference or when you want to identify a character by its Unicode code point.

Decimal Syntax

&#NUMBER;

Example:

<p>Copyright &#169; 2026</p>

The decimal number 169 corresponds to the copyright symbol ©.

Hexadecimal Syntax

&#xHEX_NUMBER;

Example:

<p>Copyright &#xA9; 2026</p>

The hexadecimal number A9 is the same Unicode code point as decimal 169.

More Examples

Both decimal and hexadecimal forms can represent many Unicode characters. For everyday writing, you can usually type the actual character directly when the document uses an appropriate encoding such as UTF-8.

Important Technical Note

Numeric character references represent Unicode code points, not UTF-8 byte sequences. For example, 😀 represents the Unicode code point U+1F600. It does not mean that the HTML source must contain the UTF-8 bytes written as a numeric reference.

6. Displaying HTML Code Examples as Text

When teaching HTML, you often need to display markup without allowing the browser to interpret it as real markup.

For example, if you want the browser to display the following code:

<h1>Hello World</h1>

You need to escape the angle brackets in the surrounding HTML source:

<pre><code>&lt;h1&gt;Hello World&lt;/h1&gt;</code></pre>

The browser decodes the character references and displays the markup as text inside the code block.

Displaying an Ampersand in Code

Suppose you want to show this HTML:

<a href="search.php?topic=html&page=2">Search</a>

When embedding that example inside an actual HTML page, the ampersand in the displayed code must also be escaped in the surrounding source:

<pre><code>&lt;a href="search.php?topic=html&amp;page=2"&gt;Search&lt;/a&gt;</code></pre>

There are two separate contexts here:

• The outer HTML source must use character references so the browser treats the example as text.
• The displayed example shows what a developer might write in an HTML attribute.

Practical rule: When displaying code examples inside HTML, escape the markup characters in the example so they are displayed rather than executed or interpreted as page structure.

7. Unicode: A Universal Character Set

Unicode is a standard that assigns code points to characters used by writing systems, symbols, and emoji across many languages.

Examples include:

• English letters: A, B, C
• Odia text: ଓଡ଼ିଆ
• Hindi text: हिंदी
• Arabic text: العربية
• Japanese text: 日本語
• Mathematical symbols: ∑, √, ∞
• Emoji: 😀, 🚀, 🎉

Unicode provides a consistent way to identify these characters, but a font and a suitable rendering environment are still needed to display them correctly.

What Is a Unicode Code Point?

A Unicode code point is written in a form such as U+0041. The code point U+0041 identifies the capital Latin letter A.

Other examples include:

• U+00A9 — ©
• U+20AC — €
• U+2713 — ✓
• U+1F600 — 😀

A code point identifies a character in the Unicode standard. It is not the same thing as a byte in a file or network stream.

Characters, Code Points and Bytes

These terms are related but different:

• Character: A unit of text as understood by a writing system or application. A visible character may consist of multiple Unicode code points.
• Code point: A numeric value assigned to a Unicode character or code point sequence component.
• Byte: An 8-bit unit used to store or transmit encoded data.
• Encoding: A method for representing text as bytes.

For example, the visible character é can be represented by the single code point U+00E9. It can also be represented as the sequence U+0065 followed by U+0301, which combines the letter e with a combining acute accent.

These sequences can look the same while having different underlying code points. This can matter when comparing strings, counting characters, searching, or processing text.

8. UTF-8: Encoding Text for the Web

UTF-8 is a Unicode encoding that represents Unicode code points using one to four bytes. It is widely used for HTML documents, APIs, source code, and web content.

Declare the Character Encoding

For an HTML document, declare UTF-8 using a meta element near the beginning of the head:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Unicode Example</title>
</head>
<body>
  <h1>Welcome to Codementrix</h1>
  <p>Odia: ଓଡ଼ିଆ</p>
  <p>Hindi: हिंदी</p>
  <p>Symbol: © € ✓ 😀</p>
</body>
</html>

The <meta charset="UTF-8"> declaration tells the browser which character encoding to use when interpreting the document, subject to the web platform's encoding rules.

Keep the charset declaration near the beginning of the document. The HTML standard requires it to be entirely contained within the first 1024 bytes of the document when using this declaration.

Why UTF-8 Matters

• It supports characters from many writing systems.
• It is compatible with ASCII for the ASCII character range.
• It is widely supported by modern browsers, servers, databases, and development tools.
• It reduces the need to represent every non-ASCII character using a numeric character reference.

In a modern HTML project, UTF-8 is usually the appropriate default. Also ensure that the source file is actually saved using UTF-8; a meta declaration cannot reliably correct a file that has already been saved with the wrong encoding.

9. Multilingual Websites and Language Support

A multilingual website must handle both character encoding and language identification correctly.

Example: English and Odia

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Multilingual Page</title>
</head>
<body>
  <h1>Welcome</h1>

  <p lang="or">
    ନମସ୍କାର। ଆପଣ କେମିତି ଅଛନ୍ତି?
  </p>

  <p lang="hi">
    नमस्ते। आप कैसे हैं?
  </p>
</body>
</html>

The page is primarily identified as English, while the Odia and Hindi paragraphs declare their own languages.

Language metadata helps screen readers choose appropriate pronunciation rules and can help translation and text-processing tools interpret content correctly.

Unicode Does Not Guarantee a Particular Appearance

Correct encoding does not guarantee that every character will look identical on every device. Rendering depends on font availability, operating-system support, browser behavior, and language-specific shaping.

If a symbol appears as a square or missing-glyph box:

• Check whether the correct character is present in the source.
• Confirm that the document and source files use UTF-8.
• Check whether an appropriate font is installed or loaded.
• Test the page in another browser or device.

10. Common Special Characters in Real-World Websites

Copyright and Trademark Notices

<footer>
  <p>&copy; 2026 Codementrix. All rights reserved.</p>
  <p>Example brand name&trade;</p>
</footer>

Mathematical Expressions

<p>Less than: 5 &lt; 10</p>
<p>Greater than: 10 &gt; 5</p>
<p>Infinity: &infin;</p>
<p>Square root: &radic;25 = 5</p>

Currency Symbols

<p>Indian Rupee: ₹1,000</p>
<p>Euro: &euro;99</p>
<p>Pound: &pound;75</p>
<p>Yen: &yen;500</p>

Modern UTF-8 HTML can usually contain the actual symbols directly. Named character references are another option.

Non-Breaking Spaces

The   character reference inserts a non-breaking space. It prevents the browser from breaking a line at that particular space.

<p>Version&nbsp;2.0</p>

This can keep short units or related tokens together in some contexts. However, do not use repeated non-breaking spaces to create page layout or large gaps. Use CSS for layout and spacing.

Typographic Dashes

<p>Use an en dash for a range: 2025&ndash;2026.</p>

<p>Use an em dash for a break in a sentence&mdash;like this.</p>

These references are optional when you can enter the actual punctuation characters directly.

11. Character References in Attributes

Character references can also be used in attribute values. This is especially useful when an attribute value needs to contain a character that would otherwise interfere with the markup syntax.

Example: Quotation Mark in an Attribute Value

<input
  type="text"
  value="He said &quot;Hello&quot;"
  aria-label="Example quotation"
>

The input's value contains quotation marks around the word Hello.

Example: Ampersand in a URL Attribute

<a href="search.php?topic=html&amp;page=2">
  Search results
</a>

In the HTML source, & represents the ampersand character in the URL value. When the browser parses the attribute, the URL contains the ampersand separator.

When you generate URLs programmatically, use the appropriate URL-building and HTML-escaping functions for the context. HTML character references and URL encoding solve different problems.

12. HTML Character References vs CSS and JavaScript Escapes

Different technologies use different escape mechanisms. Do not assume that a character escape in one language has the same meaning in another.

HTML Character Reference

<p>Copyright &copy; 2026</p>

The browser interprets © as the copyright symbol in HTML text.

CSS Escape

<style>
  .copyright::after {
    content: "\00A9";
  }
</style>

<p class="copyright">2026 Codementrix</p>

In CSS, the escape \00A9 represents the copyright symbol in the CSS string. CSS escape syntax is different from HTML character-reference syntax.

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.

Important distinction: Character references help represent characters in HTML syntax. They are not a substitute for context-aware output encoding, HTML sanitization, or server-side validation.

15. Practical Exercises

Exercise 1: Write Useful Comments

Create a page with a heading, introduction, and footer. Add one meaningful HTML comment before each major section. Confirm that the comments do not appear as ordinary visible text.

Exercise 2: Display Reserved Characters

Create paragraphs that display the following text correctly:

• 5 is less than 10.
• 10 is greater than 5.
• HTML & CSS.
• Copyright © 2026 Codementrix.

Use appropriate named character references where helpful.

Exercise 3: Display HTML as Code

Write a code example that displays the following markup as text rather than interpreting it as an actual heading:

<h1>Learn HTML</h1>

Place the example inside pre and code elements and escape the markup characters in the surrounding source.

Exercise 4: Use Numeric Character References

Display ©, €, ✓, and 😀 using both decimal and hexadecimal numeric character references.

Exercise 5: Build a Multilingual Page

Create a complete HTML document with UTF-8 encoding. Include English, Odia, Hindi, a currency symbol, and an emoji. Use language attributes where appropriate and test the page in a browser.

Exercise 6: Investigate Encoding

Open a text editor and verify that your HTML file is saved as UTF-8. Inspect the document in your browser and check that all characters render correctly. If a character appears incorrectly, investigate the source encoding and font support before changing the text.

16. Quiz: Comments, Entities, Unicode and Special Characters

Test your knowledge with these 10 questions. Each question has four plausible options, the correct answer, and an explanation for every option.

Suggested passing score: 8 out of 10. Choose your answer before expanding the explanation. These expandable answers do not automatically calculate a score or save learner progress unless additional quiz functionality is implemented.

Question 1: Which syntax correctly creates an HTML comment?

1. // This is a comment
2. /* This is a comment */
3. <!-- This is a comment -->
4. <comment>This is a comment</comment>

Question 2: Which character reference displays the less-than symbol?

1. >
2. <
3. &
4. ©

Question 3: Which character does &amp; represent?

1. Less-than symbol
2. Greater-than symbol
3. Ampersand
4. Copyright symbol

Question 4: What is the correct UTF-8 declaration for an HTML document?

1. <meta encoding="UTF-8">
2. <meta charset="UTF-8">
3. <charset>UTF-8</charset>
4. <html charset="UTF-8">

Question 5: What does Unicode primarily provide?

1. A CSS layout system
2. A standard for identifying characters using code points
3. A method for compressing images
4. A database query language

Question 6: What does the numeric character reference &#169; represent?

1. Registered trademark symbol ®
2. Copyright symbol ©
3. Euro symbol €
4. Check mark ✓

Question 7: What is the difference between a Unicode code point and UTF-8?

1. They are exactly the same thing
2. A code point identifies a character, while UTF-8 encodes Unicode code points as bytes
3. UTF-8 is a CSS selector
4. A code point is always exactly one byte long

Question 8: Why should you avoid putting passwords in HTML comments?

1. Comments always execute as JavaScript
2. Comments are encrypted automatically
3. Users can inspect the HTML source and discover the comment contents
4. HTML comments can only contain numbers

Question 9: Which is the safest simple way to display user-entered text in a DOM element?

1. Assign the input directly to innerHTML without validation
2. Use textContent when the input should be displayed as text
3. Place the input in an HTML comment
4. Convert every character to uppercase

Question 10: What is mojibake?

1. A CSS animation technique
2. A type of HTML comment
3. Garbled text caused by incorrect character-encoding interpretation
4. A method for converting decimal numbers into hexadecimal

17. Final Checklist

Before moving to Section 7, confirm that you can:

• Write HTML comments correctly and avoid nested comments.
• Use named character references such as &, <, and ©.
• Use decimal and hexadecimal numeric character references.
• Display HTML markup as text inside code examples.
• Explain the difference between Unicode code points and UTF-8 bytes.
• Declare UTF-8 and verify that source files use the correct encoding.
• Display multilingual text and symbols correctly.
• Recognize and troubleshoot common encoding problems.
• Use textContent for ordinary user-provided text rather than inserting untrusted content as HTML.

Next section: Section 7 — Links, Absolute and Relative URLs, Paths and Navigation.

End of Section 6 — Codementrix HTML5 Mastery.