🌱BeginnerAdvanced Basics
HTML Entities
Display reserved and special characters using HTML entities like &, <, ©.
Overview
HTML entities are special codes used to represent characters that would otherwise be misinterpreted by the browser or cannot be typed easily. They start with & and end with ; a named entity like & or a numeric code like ©.
The most important entities are for reserved characters:
- < → < (less-than sign, which would start an HTML tag)
- > → > (greater-than sign)
- & → & (ampersand, which starts an entity itself)
- " → " (quotation mark, useful inside attributes)
- ' → ' (apostrophe, HTML5)
Entities are also used for characters like ©, ®, →, , non-breaking space ( ).
Key Points
- •< and > are essential for displaying < and > in content without creating HTML tags
- •& is required to display a literal & character
- • is a non-breaking space prevents line breaks between words
- •Named entities (©) are easier to read; numeric entities (©) work in any encoding
- •With UTF-8 charset you can type most symbols directly entities are mainly for reserved characters
- •Entities are case-sensitive: © works; © does not
Examples
Reserved character entities
<!-- Displaying HTML code in a web page -->
<p>To create a link, use <code><a href="..."></code></p>
<!-- Ampersand in text -->
<p>Tom & Jerry is a classic cartoon.</p>
<!-- Quote inside an attribute value -->
<p title="He said "Hello"">Hover for quote</p>Common named entities
<p>© 2024 My Company</p> <!-- © -->
<p>® Registered Trademark</p> <!-- ® -->
<p>™ My Product™</p> <!-- â„¢ -->
<p>Price: €49 / £42</p> <!-- € £ -->
<p>10 × 5 = 50</p> <!-- × non-breaking -->
<p>Temperature: 72°F</p> <!-- ° -->Non-breaking space and dash entities
<!-- Non-breaking space: prevents line break between words -->
<p>Chapter 1</p>
<p>$ 99.99</p>
<!-- Dashes -->
<p>Monday–Friday</p> <!-- – en dash: date/range -->
<p>Wait—what?</p> <!-- em dash: pause -->Common Mistakes
- Forgetting the semicolon at the end of an entity & without ; won't render
- Using to add visual spacing use CSS margin/padding instead
- Displaying user-provided content without escaping < and & creates XSS vulnerability
Note
The most important entities to memorize: < > & © . In practice, if your page uses UTF-8 (which it should), you can type most symbols directly entities are mainly needed for <, >, and &.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4