Kenhuang Academy
  • English

      • HTML Entities and Symbols

      What are HTML Entities?

      HTML entities are codes used to display special characters in HTML documents. Certain characters have special meaning in HTML (such as <, >, and &), and if you want to display these characters on a page, you need to use HTML entities.

      Entity Syntax

      HTML entities can be represented in two ways:

      1. Entity name: &entity_name;
      2. Entity number: &#entity_number;

      For example:

      • &lt; or &#60; represents <
      • &gt; or &#62; represents >

      Reserved Characters

      Characters That Must Use Entities

      DisplayEntity NameEntity NumberDescription
      <&lt;&#60;Less than
      >&gt;&#62;Greater than
      &&amp;&#38;Ampersand
      "&quot;&#34;Double quote
      '&apos;&#39;Single quote (apostrophe)

      Example

      <p>If a &lt; b and b &gt; c, then a &lt; c</p>
<p>Company name: Smith &amp; Johnson</p>
<p>He said: &quot;Hello!&quot;</p>

      Display result:

      If a < b and b > c, then a < c
Company name: Smith & Johnson
He said: "Hello!"

      Space Characters

      DisplayEntity NameEntity NumberDescription
      &nbsp;&#160;Non-breaking space
      &ensp;&#8194;En space
      &emsp;&#8195;Em space
      &thinsp;&#8201;Thin space

      Common Symbols

      Currency Symbols

      DisplayEntity NameEntity NumberDescription
      ¢&cent;&#162;Cent
      £&pound;&#163;Pound
      ¥&yen;&#165;Yen
      €&euro;&#8364;Euro
      $-&#36;Dollar

      Mathematical Symbols

      DisplayEntity NameEntity NumberDescription
      ×&times;&#215;Multiplication
      ÷&divide;&#247;Division
      ±&plusmn;&#177;Plus-minus
      ≠&ne;&#8800;Not equal
      ≤&le;&#8804;Less than or equal
      ≥&ge;&#8805;Greater than or equal
      ∞&infin;&#8734;Infinity
      ∑&sum;&#8721;Summation
      √&radic;&#8730;Square root
      ∫&int;&#8747;Integral

      Greek Letters

      DisplayEntity NameEntity NumberDescription
      α&alpha;&#945;Alpha
      β&beta;&#946;Beta
      γ&gamma;&#947;Gamma
      δ&delta;&#948;Delta
      π&pi;&#960;Pi
      Σ&Sigma;&#931;Sigma (uppercase)
      Ω&Omega;&#937;Omega (uppercase)

      Arrow Symbols

      DisplayEntity NameEntity NumberDescription
      ←&larr;&#8592;Left arrow
      →&rarr;&#8594;Right arrow
      ↑&uarr;&#8593;Up arrow
      ↓&darr;&#8595;Down arrow
      ↔&harr;&#8596;Left-right arrow
      ⇐&lArr;&#8656;Double left arrow
      ⇒&rArr;&#8658;Double right arrow

      Punctuation Symbols

      DisplayEntity NameEntity NumberDescription
      ©&copy;&#169;Copyright
      ®&reg;&#174;Registered trademark
      ™&trade;&#8482;Trademark
      §&sect;&#167;Section
      &para;&#182;Paragraph
      •&bull;&#8226;Bullet
      …&hellip;&#8230;Ellipsis
      ′&prime;&#8242;Prime (minutes)
      ″&Prime;&#8243;Double prime (seconds)

      Quotation Marks

      DisplayEntity NameEntity NumberDescription
      "&ldquo;&#8220;Left double quote
      "&rdquo;&#8221;Right double quote
      '&lsquo;&#8216;Left single quote
      '&rsquo;&#8217;Right single quote
      «&laquo;&#171;Left angle quote
      »&raquo;&#187;Right angle quote

      Other Common Symbols

      DisplayEntity NameEntity NumberDescription
      °&deg;&#176;Degree
      ¼&frac14;&#188;One quarter
      ½&frac12;&#189;One half
      ¾&frac34;&#190;Three quarters
      ‰&permil;&#8240;Per mille
      †&dagger;&#8224;Dagger
      ‡&Dagger;&#8225;Double dagger
      ♠&spades;&#9824;Spades
      ♣&clubs;&#9827;Clubs
      ♥&hearts;&#9829;Hearts
      ♦&diams;&#9830;Diamonds

      Emoji Symbols

      Modern browsers support Unicode emoji:

      <p>😀 &#128512; Smile</p>
<p>❤️ &#10084; Heart</p>
<p>⭐ &#11088; Star</p>
<p>🎉 &#127881; Celebration</p>
<p>👍 &#128077; Thumbs up</p>

      Practical Examples

      <footer>
    <p>&copy; 2024 My Website. All rights reserved.</p>
</footer>

      Mathematical Formulas

      <p>Pythagorean theorem: a&sup2; + b&sup2; = c&sup2;</p>
<p>Circle area: A = &pi;r&sup2;</p>
<p>Temperature: 25&deg;C</p>

      Price Display

      <p>Price: &yen;99.99</p>
<p>Discount: &frac12; price</p>

      Quoted Text

      <p>He said: &ldquo;This is a great idea!&rdquo;</p>
<p>Book title: &laquo;HTML Tutorial&raquo;</p>

      Complete Example

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Entities Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        
        .example {
            background-color: #f4f4f4;
            padding: 15px;
            margin: 10px 0;
            border-left: 4px solid #333;
        }
    </style>
</head>
<body>
    <h1>HTML Entities and Symbols Example</h1>
    
    <div class="example">
        <h2>Special Characters</h2>
        <p>Less than: &lt; Greater than: &gt; Ampersand: &amp;</p>
        <p>Quotes: &quot;Hello&quot; Apostrophe: &apos;World&apos;</p>
    </div>
    
    <div class="example">
        <h2>Mathematical Symbols</h2>
        <p>2 &times; 3 = 6</p>
        <p>10 &divide; 2 = 5</p>
        <p>x &le; 10 and x &ge; 0</p>
        <p>&pi; &asymp; 3.14159</p>
    </div>
    
    <div class="example">
        <h2>Currency Symbols</h2>
        <p>Dollar: $100</p>
        <p>Euro: &euro;50</p>
        <p>Yen: &yen;200</p>
        <p>Pound: &pound;75</p>
    </div>
    
    <div class="example">
        <h2>Copyright Information</h2>
        <p>&copy; 2024 My Company&reg;</p>
        <p>Product Name&trade;</p>
    </div>
</body>
</html>

      Best Practices

      1. Use UTF-8 encoding: Use <meta charset="UTF-8"> in HTML documents to directly input most special characters
      2. Escape reserved characters: Always use entities for <, >, &, ", etc.
      3. Improve readability: For common symbols, entity names are more readable than numbers
      4. Consider compatibility: Some older browsers may not support all entities
      5. Use semantic symbols: Use appropriate symbols in the right places (e.g., copyright, trademark symbols)

      Summary

      HTML entities are an important tool for displaying special characters on webpages. Mastering common HTML entities can help you create more professional and accurate webpage content. Remember to escape reserved characters and use appropriate symbols and characters as needed.