HTML Entities, Symbols & Special Characters

Why HTML Entities Exist

HTML uses certain characters as part of its own syntax. The angle brackets < and > define tags. The ampersand & starts entity references. The double quote " delimits attribute values. If you want to display these characters as visible text on your page rather than having the browser interpret them as code, you need a way to escape them. That is exactly what HTML entities do. An HTML entity is a special sequence that starts with an ampersand and ends with a semicolon, and the browser renders it as the corresponding character. Without entities, writing a math expression like "5 < 10" in HTML would break your page because the browser would interpret the less-than sign as the start of a tag.

The Essential Entities You Must Know

There are five entities that every HTML developer encounters regularly. These are not optional -- you will break your HTML if you use the raw characters in the wrong context. The ampersand entity & displays as &. The less-than entity < displays as <. The greater-than entity > displays as >. The double quote entity " displays as ". The non-breaking space   creates a space that prevents line breaks between words.

<!-- Displaying reserved characters safely -->
<p>In HTML, tags use &lt; and &gt; symbols.</p>
<p>Use &amp; to write an ampersand in HTML.</p>
<p>Attribute values use &quot;double quotes&quot;.</p>

<!-- Non-breaking space to prevent line breaks -->
<p>Mr.&nbsp;Smith earned $10&nbsp;million.</p>

<!-- Showing code examples in text -->
<p>The &lt;strong&gt; tag makes text bold.</p>

The non-breaking space deserves special attention. A regular space allows the browser to break a line at that point during word wrapping. A non-breaking space forces the words on either side to stay together on the same line. Use it between titles and names (Mr.&nbsp;Jones), between numbers and their units (100&nbsp;km), and between other word pairs that should never be separated by a line break.

Common Symbols and Special Characters

Beyond the required escape entities, HTML provides named entities for hundreds of commonly used symbols. These are especially useful for legal symbols, mathematical notation, currency signs, and typographic characters that are not easily typed on a standard keyboard.

<!-- Legal and business symbols -->
<p>&copy; 2026 Company Name</p>        <!-- copyright -->
<p>Brand&trade; Product</p>              <!-- trademark -->
<p>Brand&reg; Registered</p>             <!-- registered -->

<!-- Currency symbols -->
<p>Price: &euro;50 / &pound;45 / &yen;7000</p>

<!-- Math symbols -->
<p>5 &times; 3 = 15</p>                 <!-- multiplication -->
<p>10 &divide; 2 = 5</p>                <!-- division -->
<p>x &ne; y</p>                          <!-- not equal -->
<p>x &le; 100</p>                        <!-- less than or equal -->

<!-- Arrows -->
<p>Next &rarr; Previous &larr;</p>      <!-- right and left arrows -->
<p>Up &uarr; Down &darr;</p>            <!-- up and down arrows -->

Numeric Character References and Unicode

Every character in Unicode has a numeric code point. You can use these code points directly in HTML using numeric character references. There are two formats: decimal references like © and hexadecimal references like © -- both render as the copyright symbol. Numeric references are useful when there is no named entity available for the character you need, or when you want to include characters from other writing systems without changing your file encoding.

<!-- Decimal numeric references -->
<p>&#169; Copyright symbol</p>
<p>&#8364; Euro sign</p>
<p>&#9733; Star character</p>

<!-- Hexadecimal numeric references -->
<p>&#xA9; Copyright symbol</p>
<p>&#x20AC; Euro sign</p>
<p>&#x2605; Star character</p>

<!-- Direct Unicode characters (with UTF-8 encoding) -->
<p>Direct symbols: &copy; &euro; ★</p>

<!-- Characters from other scripts -->
<p>&#x4F60;&#x597D; means "hello" in Chinese</p>

When your HTML file uses UTF-8 encoding (which it should, as declared by <meta charset="UTF-8">), you can type most Unicode characters directly into your source code. However, there are still good reasons to use entities: they make your source code more readable when the character is visually ambiguous, they work reliably regardless of the text editor used, and they make it clear to other developers that the character was intentional.

Emoji in HTML

Modern browsers fully support emoji as Unicode characters. You can include them directly in your HTML source, use their decimal or hexadecimal code points, or copy them from an emoji reference. Since emoji are just Unicode characters, they work anywhere text is allowed -- paragraphs, headings, buttons, and even title tags.

<!-- Direct emoji characters (requires UTF-8) -->
<p>Rating: ⭐⭐⭐⭐⭐</p>

<!-- Using numeric references for emoji -->
<p>Thumbs up: &#128077;</p>
<p>Heart: &#x2764;</p>
<p>Check mark: &#x2705;</p>

<!-- Emoji in attributes -->
<button title="Add to favorites &#x2764;">Like</button>

When to Use Entities vs Actual Characters

The decision of when to use HTML entities versus typing characters directly comes down to a few clear rules. You must always use entities for the five reserved characters (&, <, >, ", and ') when they appear in text content or attributes. You should use named entities for symbols that improve source code readability, such as © instead of the copyright symbol directly. You can safely type characters directly when your document uses UTF-8 encoding and the character is clearly visible and unambiguous in your source code. For currency symbols, mathematical symbols, and arrows, named entities often make the code more maintainable because any developer can instantly understand what → means, even without seeing the rendered output.