Some symbols, like < and >, are reserved for use in HTML code. If we
include reserved characters in the text we want to display on the screen, web
browsers might interpret the symbols as tags.
Example
The following HTML code should display a simple heading element, followed by two (non-working) buttons. Unfortunately, the Back button does not display correctly, and the editor shows several error messages.
Hover over each red X to read the messages. Even though the heading and
Next button appear on the page, the editor flags problems in the code
because of the extra < and > symbols.
The syntax highlighting in line 8 also points out that our HTML is a little off.
Character entities are used to display reserved characters in HTML. To safely include a reserved character as part of some text, the general syntax is:
&entity_name;
&#entity_number;
Every reserved character has its own entity_name, like gt for the
greater than sign, in addition to a number (62 for >). To display a
reserved character on the screen, begin with the & symbol, followed by
either the entity name or number. End with a semicolon ;.
<< in line 8 with << to
make the Back button appear as intended.< symbol with its number, <. The line
rendered properly before, but using the entity instead of the symbol makes
the error message go away.> symbols with either the entity name or
number.Besides reserved characters, we can also use entity names and numbers to
display special symbols, like & or arrows.
The table below summarizes some of the common entities. More complete tables can be found at W3Schools and this Character Entity Reference Chart.
| Description | Entity Name | Entity Number | Result |
|---|---|---|---|
| Ampersand | & |
& |
& |
| Less than | < |
< |
< |
| Greater than | > |
> |
> |
| Copyright | © |
© |
© |
| Arrows | ← ↑ → ↓ |
← ↑ → ↓ |
←, ↑, →, ↓ |
| Joy emoji | (no entity name) | 😂 |
😂 |
Note
Entity names are case sensitive.