HTML Entities
HTML Entities
Section titled “HTML Entities”Certain characters have special meaning in HTML (like < which starts a tag). To display these characters literally as text content, you must use character entities.
Entities are also used to display characters not easily typed on a standard keyboard (like © or €).
What are HTML Entities?
Section titled “What are HTML Entities?”An HTML entity is a piece of text (a string) that begins with an ampersand (&) and ends with a semicolon (;). Entities represent specific characters.
There are two types:
- Named Entities: Use a memorable name (e.g.,
<for<,&for&,©for ©). Easier to read and remember. - Numeric Entities: Use a number corresponding to the character’s code point in Unicode (e.g.,
<for<,&for&,©for ©). Universally supported by browsers.
Syntax:
&entity_name;<!-- or -->&#entity_number;For example, to display <p> literally in your text, you must write <p> or <p>.
Tip: While named entities are often preferred for readability, numeric entities guarantee display even if a browser doesn’t recognize a specific name (though this is rare for common entities).
Essential Entities: Reserved Characters
Section titled “Essential Entities: Reserved Characters”You must use entities for these characters when you want them to appear as literal text, not be interpreted as HTML markup:
| Character | Description | Named Entity | Numeric Entity |
|---|---|---|---|
| < | Less than | < | < |
| > | Greater than | > | > |
| & | Ampersand | & | & |
| ” | Double quote | " | " (Useful inside attribute values quoted with ”) |
| ‘ | Single quote (apostrophe) | ' | ' (Useful inside attribute values quoted with ’) |
Example:
<p>The formula is: E = mc<sup>2</sup>.</p><p>Tom & Jerry is a classic cartoon.</p><p>He said, "Use entities!"</p>Non-Breaking Space
Section titled “Non-Breaking Space”Browsers collapse multiple consecutive whitespace characters (spaces, tabs, newlines) in HTML source code into a single space when rendering.
To insert an explicit space that browsers won’t collapse, or to prevent a line break between two words, use the non-breaking space entity: (or  ).
Example: Keep ‘10 km’ together on one line.
<p>The distance is 10 km.</p>Use sparingly; CSS margin and padding are the standard ways to control spacing.
Other Common Character Entities
Section titled “Other Common Character Entities”| Result | Description | Named Entity | Numeric Entity |
|---|---|---|---|
| © | Copyright | © | © |
| ® | Registered Trademark | ® | ® |
| ™ | Trademark | ™ | ™ |
| € | Euro | € | € |
| £ | Pound Sterling | £ | £ |
| ¥ | Yen | ¥ | ¥ |
| ¢ | Cent | ¢ | ¢ |
| • | Bullet | • | • |
| — | Em dash | — | — |
| – | En dash | – | – |
Note: Entity names are case-sensitive ( works, &NBSP; does not).
Entities vs. UTF-8 Encoding
Section titled “Entities vs. UTF-8 Encoding”Modern web pages should always use UTF-8 character encoding, declared via <meta charset="UTF-8"> in the <head>. UTF-8 supports virtually all characters used in any language.
With UTF-8, you can often type characters like ©, €, £, or accented letters directly into your HTML source code, and they will display correctly without needing entities.
Example (with UTF-8):
<p>Price: €50. Copyright © 2024.</p><p>¡Hola, señor!</p>However, you still must use entities for the reserved characters <, >, and & to avoid breaking your HTML structure. Using entities for other special characters (©, €, etc.) remains a valid and sometimes clearer alternative to typing them directly.
For a comprehensive list of HTML entities, refer to resources like the MDN Web Docs.