10. HTML Entities

Introduction

HTML entities are special codes used to represent characters that have special meaning in HTML or characters that are difficult to type directly. They allow you to display reserved characters, special symbols, and characters from various languages and character sets. Understanding HTML entities is essential for creating properly formatted and accessible web content.

What are HTML Entities?

HTML entities are sequences of characters that represent other characters. They start with an ampersand (&) and end with a semicolon (;).

Basic Syntax

&entity_name;
&#entity_number;

• Named entities: & (ampersand)
• Numeric entities: & (decimal) or & (hexadecimal)

Why Use HTML Entities?

Reserved Characters

Some characters have special meaning in HTML and must be escaped:

<!-- These would break HTML if used directly -->
<p>Price: $10 < $20</p>        <!-- < breaks HTML -->
<p>He said "Hello"</p>          <!-- Quotes may cause issues -->
<p>Tom & Jerry</p>              <!-- & starts an entity -->

Solution:

<p>Price: $10 &lt; $20</p>       <!-- &lt; for < -->
<p>He said &quot;Hello&quot;</p> <!-- &quot; for " -->
<p>Tom &amp; Jerry</p>          <!-- &amp; for & -->

Special Characters

Display characters that aren’t on your keyboard:

<p>&copy; 2024</p>              <!-- Copyright symbol -->
<p>&reg; Trademark</p>          <!-- Registered trademark -->
<p>&trade; Brand</p>            <!-- Trademark symbol -->
<p>&euro; 100</p>               <!-- Euro symbol -->
<p>&pound; 50</p>                <!-- Pound symbol -->

Accessibility

Entities help ensure characters display correctly across different systems and browsers.

Common HTML Entities

Reserved Characters

Character	Entity Name	Entity Number	Description
<	&lt;	&#60;	Less than
>	&gt;	&#62;	Greater than
&	&amp;	&#38;	Ampersand
"	&quot;	&#34;	Double quote
'	&apos;	&#39;	Apostrophe (single quote)

Common Symbols

Character	Entity Name	Entity Number	Description
©	©	©	Copyright
®	®	®	Registered trademark
™	™	™	Trademark
€	€	€	Euro
£	£	£	Pound
¥	¥	¥	Yen
§	§	§	Section
¶	¶	¶	Paragraph
•	•	•	Bullet
…	…	…	Ellipsis
—	—	—	Em dash
–	–	–	En dash
°	°	°	Degree
±	±	±	Plus-minus
×	×	×	Multiplication
÷	÷	÷	Division
½	½	½	One half
¼	¼	¼	One quarter
¾	¾	¾	Three quarters

Spacing Entities

Character	Entity Name	Entity Number	Description
	 	 	Non-breaking space
	 	 	En space
	 	 	Em space
	 	 	Thin space

Mathematical Symbols

Character	Entity Name	Entity Number	Description
∞	∞	∞	Infinity
∑	∑	∑	Summation
∏	∏	∏	Product
√	√	√	Square root
∫	∫	∫	Integral
≈	≈	≈	Approximately equal
≠	≠	≠	Not equal
≤	≤	≤	Less than or equal
≥	≥	≥	Greater than or equal

Arrow Symbols

Character	Entity Name	Entity Number	Description
←	←	←	Left arrow
→	→	→	Right arrow
↑	↑	↑	Up arrow
↓	↓	↓	Down arrow
↔	↔	↔	Left-right arrow

Using HTML Entities

In Content

<p>Copyright &copy; 2024 My Company</p>
<p>Price: &euro;29.99</p>
<p>5 &times; 3 = 15</p>
<p>Temperature: 25&deg;C</p>

In Attributes

<img src="photo.jpg" alt="Tom &amp; Jerry">
<a href="/page" title="Price &lt; $100">Link</a>

In Code Examples

When displaying HTML code in content:

<p>Use <code>&lt;div&gt;</code> for containers.</p>
<p>Escape ampersands: <code>&amp;amp;</code></p>

Numeric Entities

You can use numeric codes instead of named entities:

Decimal

<p>&#169; Copyright</p>    <!-- Same as &copy; -->
<p>&#38; Ampersand</p>      <!-- Same as &amp; -->

Hexadecimal

<p>&#xA9; Copyright</p>    <!-- Same as &copy; -->
<p>&#x26; Ampersand</p>     <!-- Same as &amp; -->

Common Use Cases

Copyright and Legal

<footer>
    <p>&copy; 2024 Company Name. All rights reserved.</p>
    <p>Product&reg; and Brand&trade; are trademarks.</p>
</footer>

Mathematical Content

<p>Area = &pi;r&sup2;</p>
<p>5 &times; 3 = 15</p>
<p>Temperature: 25&deg;C</p>
<p>x &le; 10</p>

Quotations

<p>He said, &quot;Hello, world!&quot;</p>
<p>It&apos;s a beautiful day.</p>

Currency

<p>Price: &euro;29.99</p>
<p>Cost: &pound;50.00</p>
<p>Amount: &yen;1000</p>

Best Practices

When to Use Entities

1. Reserved characters: Always escape <, >, & in content
2. Special symbols: Use entities for symbols not on keyboard
3. Consistency: Use entities for consistent display across browsers
4. Accessibility: Ensure screen readers can interpret characters

When Not to Use Entities

1. Regular text: Don’t use entities for normal letters and numbers
2. UTF-8 encoding: With proper UTF-8, many characters can be typed directly
3. Over-encoding: Don’t encode characters unnecessarily

UTF-8 Alternative

With UTF-8 encoding, you can often type characters directly:

<!-- Both work with UTF-8 -->
<p>&copy; 2024</p>
<p>© 2024</p>

<!-- UTF-8 is preferred for readability -->
<meta charset="UTF-8">
<p>© 2024</p>

However, entities are still useful for:

• Reserved characters (<, >, &)
• When you can’t type the character
• Ensuring compatibility

Common Mistakes

Forgetting the Semicolon

Problem:

<p>Copyright &copy 2024</p>  <!-- Missing semicolon -->

Solution:

<p>Copyright &copy; 2024</p>  <!-- Correct -->

Double Encoding

Problem:

<p>&amp;amp;</p>  <!-- Shows &amp; instead of & -->

Solution:

<p>&amp;</p>  <!-- Correct -->

Using Entities Unnecessarily

Problem:

<p>&#72;&#101;&#108;&#108;&#111;</p>  <!-- Unnecessary -->

Solution:

<p>Hello</p>  <!-- Just type it -->

Example: Using Entities

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Entities Example</title>
</head>
<body>
    <header>
        <h1>HTML Entities Demo</h1>
    </header>
    <main>
        <section>
            <h2>Reserved Characters</h2>
            <p>Less than: &lt; | Greater than: &gt; | Ampersand: &amp;</p>
            <p>Quote: &quot;Hello&quot; | Apostrophe: It&apos;s</p>
        </section>

        <section>
            <h2>Symbols</h2>
            <p>Copyright: &copy; 2024</p>
            <p>Trademark: Brand&reg; and Product&trade;</p>
            <p>Currency: &euro;100, &pound;50, &yen;1000</p>
        </section>

        <section>
            <h2>Mathematical</h2>
            <p>5 &times; 3 = 15</p>
            <p>Area = &pi;r&sup2;</p>
            <p>Temperature: 25&deg;C</p>
            <p>x &le; 10 and y &ge; 5</p>
        </section>

        <section>
            <h2>Spacing</h2>
            <p>Non-breaking&nbsp;space&nbsp;example</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 Example Site. All rights reserved.</p>
    </footer>
</body>
</html>

References

• MDN Web Docs - HTML Entities
• W3C HTML5 Specification - Named Character References
• HTML Entity Reference
• W3Schools - HTML Entities