The representation method of special characters

Representation Methods for Special Characters

HTML documents often need to display special characters such as less-than signs, greater-than signs, quotation marks, etc. These characters have special meanings in HTML, and using them directly may cause parsing errors. To display these characters correctly, character entities or numeric references must be used.

Character Entities

Character entities are a way to represent special characters in HTML, starting with & and ending with ;. Common character entities include:

&lt;    <!-- Less-than sign < -->
&gt;    <!-- Greater-than sign > -->
&amp;   <!-- Ampersand & -->
&quot;  <!-- Double quotation mark " -->
&apos;  <!-- Single quotation mark ' -->
&nbsp;  <!-- Non-breaking space -->

For example, to display the code <p>Hello</p> on a webpage, you can write:

<p>Hello</p>

Numeric References

Numeric references use the Unicode code point of a character to represent special characters. The format is &#number; (decimal) or &#xhexadecimal; (hexadecimal). For example:

&#60;    <!-- Decimal representation of < -->
&#x3C;   <!-- Hexadecimal representation of < -->
&#62;    <!-- Decimal representation of > -->
&#x3E;   <!-- Hexadecimal representation of > -->

Common Special Characters Reference Table

Displaying Special Symbols

In addition to basic punctuation, HTML supports various mathematical symbols, currency symbols, and other special characters:

&plusmn;   <!-- ± Plus-minus sign -->
&times;    <!-- × Multiplication sign -->
&divide;   <!-- ÷ Division sign -->
&euro;     <!-- € Euro symbol -->
&pound;    <!-- £ Pound symbol -->
&yen;      <!-- ¥ Yen symbol -->
&cent;     <!-- ¢ Cent symbol -->

Practical Examples

Displaying special characters correctly in forms:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Enter username &lt;3-15 characters&gt;">
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="Password must contain &amp; or @">
  
  <button type="submit">Submit &raquo;</button>
</form>

Displaying HTML tags in code blocks:

<pre>
  <code>
    &lt;div class="container"&gt;
      &lt;p&gt;This is a paragraph&lt;/p&gt;
      &lt;!-- This is a comment --&gt;
    &lt;/div&gt;
  </code>
</pre>

Handling Special Characters in CSS

CSS can also use Unicode escape sequences to represent special characters:

.icon::before {
  content: "\00A9";  /* Copyright symbol */
}

.arrow::after {
  content: "\2192";  /* Right arrow → */
}

Handling Special Characters in JavaScript

When processing strings containing special characters in JavaScript:

// Convert special characters to HTML entities
function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

const original = '<script>alert("XSS")</script>';
const escaped = escapeHtml(original);
console.log(escaped); // Output: &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;

URL Encoding of Special Characters

Special characters in URLs must be encoded:

const query = 'name=John&Doe&age=30';
const encoded = encodeURIComponent(query);
console.log(encoded); // Output: name%3DJohn%26Doe%26age%3D30

Mathematical Symbols and Greek Letters

HTML supports the display of various mathematical symbols and Greek letters:

&alpha;    <!-- α -->
&beta;     <!-- β -->
&gamma;    <!-- γ -->
&delta;    <!-- δ -->
&epsilon;  <!-- ε -->
&theta;    <!-- θ -->
&pi;       <!-- π -->
&sigma;    <!-- σ -->
&omega;    <!-- ω -->
&infin;    <!-- ∞ -->
&int;      <!-- ∫ -->
&sum;      <!-- ∑ -->
&radic;    <!-- √ -->

Directional Arrows and Shape Symbols

&larr;     <!-- ← -->
&uarr;     <!-- ↑ -->
&rarr;     <!-- → -->
&darr;     <!-- ↓ -->
&harr;     <!-- ↔ -->
&crarr;    <!-- ↵ -->
&loz;      <!-- ◊ -->
&spades;   <!-- ♠ -->
&clubs;    <!-- ♣ -->
&hearts;   <!-- ♥ -->
&diams;    <!-- ♦ -->

International Characters and Accent Marks

HTML supports various international characters with accent marks:

&agrave;   <!-- à -->
&aacute;   <!-- á -->
&acirc;    <!-- â -->
&atilde;   <!-- ã -->
&auml;     <!-- ä -->
&aring;    <!-- å -->
&egrave;   <!-- è -->
&eacute;   <!-- é -->
&ecirc;    <!-- ê -->
&euml;     <!-- ë -->
&iuml;     <!-- ï -->
&ouml;     <!-- ö -->
&uuml;     <!-- ü -->
&ccedil;   <!-- ç -->
&ntilde;   <!-- ñ -->

Input Methods for Special Characters

In addition to using character entities, special characters can be input in other ways:

1. Operating system character map tools
2. Keyboard shortcuts (e.g., Alt + numeric keypad)
3. Input method special symbol functions
4. Copying and pasting Unicode characters directly

Compatibility Issues with Special Characters

Although modern browsers support special characters well, note the following:

1. Some older browsers may not support certain character entities
2. Fonts may not include glyphs for certain special characters
3. Display may be inconsistent on mobile devices
4. Email clients have limited support for special characters

Performance Considerations for Special Characters

Extensive use of character entities may:

1. Slightly increase HTML file size
2. Affect page loading speed (though minimally)
3. Increase DOM parsing complexity

For frequently used special characters, consider using CSS content properties or web font icons as alternatives.