Lesson 12: Character Entity References

Understanding Character Entities

HTML provides character entity references to display special characters that are reserved for use in HTML or that don't appear on standard keyboards. These entities ensure your content displays correctly across all browsers and devices.

Why Use Character Entities?

HTML reserves certain characters for its syntax. For example:

• The less-than sign (<) is used to start HTML tags
• The ampersand (&) is used to start entity references
• Quotation marks (") are used for attribute values

To display these characters as content, you must use their corresponding HTML entities.

Essential Character Entities

Here are the most commonly used character entities in HTML:

Using Entities in Practice

Let's see how to use character entities in real HTML code:

<p>To display HTML tags, use entities: &lt;div&gt;Content&lt;/div&gt;</p>
<p>Copyright &copy; 2023 My Company. All rights reserved.</p>
<p>The price is 100&euro; &plus; 20&percnt; VAT.</p>
<p>Special characters: &hearts; &diams; &clubs; &spades;</p>
<p>Mathematical operators: &sum; &prod; &radic; &infin;</p>

<!-- Displaying code examples -->
<pre>
function calculate(a, b) {
    return a &lt; b ? a : b;
}
</pre>

<!-- Using entities in attributes -->
<input type="text" placeholder="Search &hellip;">

<!-- Creating non-breaking spaces -->
<p>Dr.&nbsp;Liew Voon&nbsp;Kiong</p>

<!-- Currency symbols -->
<p>Price: &dollar;49.99 | &pound;39.99 | &yen;5499</p>

function calculate(a, b) {
    return a < b ? a : b;
}

Special Characters & Symbols

HTML provides entities for thousands of special characters. Here are some useful categories:

Common Symbols

Mathematical Symbols

Arrows & Shapes

Practical Exercise: Using Entities

Create a webpage section using HTML entities with the following requirements: