HTML Entities

HTML Entities: Rendering Special Characters and Reserved Symbols

HTML entities are special code sequences that display reserved characters (like < and >), invisible spaces, symbols, and non-ASCII characters without triggering HTML tag parsing errors.

Entity Syntax and Common Characters

HTML entities begin with an ampersand (&) and end with a semicolon (;). They can be declared using entity names or numerical codes:

<!-- Display reserved HTML tag characters -->
<p>&lt;div&gt; represents a block container.&lt;/div&gt;</p>

<!-- Reserved and special character examples -->
<p>Copyright &copy; 2026 | All rights reserved &reg;</p>

<!-- Non-breaking space entity -->
<p>Word1&nbsp;&nbsp;&nbsp;Word2</p>

Common HTML entity reference table:

1. < (<): Less-than symbol (prevents tag parsing).
2. > (>): Greater-than symbol.
3. & (&): Ampersand symbol.
4. " ("): Quotation mark.
5.  : Non-breaking space (prevents text automatic line breaks).
6. © (©): Copyright symbol.
7. ™ (™): Trademark symbol.

Entity Parser Flow

flowchart LR
    A["Raw HTML Source (<p>)"] --> B["Browser HTML Parser"]
    B --> C["Renders Entity Symbol (<p>) On Screen"]

Practical Code Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Entities Demonstration</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">

    <h2>Special Character Entities Showcase</h2>

    <div style="background-color: #1e293b; padding: 1.5rem; border-radius: 8px; max-width: 500px;">
        <p>Price: &dollar;99 &amp; Shipping is &quot;FREE&quot;!</p>
        <p>Formula: 5 &lt; 10 &amp;&amp; 20 &gt; 15</p>
        <p>Brand Notice: KoderSolution&trade; &copy; 2026</p>
    </div>

</body>
</html>

Best Practices

• Always use & instead of raw & in text URLs and markup: Raw ampersands can confuse HTML entity parsers inside HTML attributes.
• Use   sparingly: Avoid using multiple   entity chains to create layout spacing; use CSS margins or padding instead.
• Escape < and > in inline code snippets: Ensures browser renders code samples visually rather than attempting to parse missing HTML tags.

Self-Check Challenge

Write an HTML paragraph displaying the sentence: To write a comment, use <!-- comment --> using < and > entities!