14.5. HTML Entities¶
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 the code editor above, replace the
<<in line 8 with<<to make the Back button appear as intended.In line 7 replace the
<symbol with its number,<. The line rendered properly before, but using the entity instead of the symbol makes the error message go away.In line 9 replace the two
>symbols with either the entity name or number.
14.5.1. Entity Table¶
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.