HTML Course 4.5 Character entities (special symbols, spaces, etc.)

4.5 Character entities (special symbols, spaces, etc.)

In HTML, certain characters either have special meaning in the markup (like < or &) or are not easily typed from a keyboard (like ©, ™ or non-breaking spaces). To display these characters correctly, we use character entities (also called character references). A character entity starts with an ampersand (&), followed by a name or a number, and ends with a semicolon (;).

Why use character entities?

• Prevent markup collisions: display < instead of starting a tag.
• Include symbols not on the keyboard: ©, €, ™, ✓, →, …
• Insert white-space or special spacing:   for non-breaking space.
• Ensure consistent rendering across browsers and encodings.

Types of character entities

1. Named character references: human-readable names, e.g. ©.
2. Numeric character references (decimal): © for ©.
3. Numeric character references (hexadecimal): © for ©.

Common named character references

Numeric character references

Sometimes you may not recall the named reference or you work with a character outside the named list. You can always use its Unicode code point:

• Decimal form: &#NNNN;, where NNNN is the decimal code (e.g. © → ©).
• Hexadecimal form: &#xHHHH;, where HHHH is the hex code (e.g. © → ©).

Special spacing: non-breaking spaces

The standard space (ASCII 32) may collapse or allow line breaks. To keep text together or insert extra spaces safely:

• &nbsp; – non-breaking space, prevents line wrap.
• &ensp; – en-space (width ~ half em).
• &emsp; – em-space (width ~ em).

Usage examples

Show the less-than sign: <div>Hello</div>


©© 2024 Your Company


Price: €100 per unit


Winter is coming ☃


Smile! 😀


  This paragraph is indented.
  

Best practices and pitfalls

• Always end entities with ;. Omitting it can break parsing.
• Prefer named entities for readability when available.
• Use numeric references for characters without a named form.
• Ensure your document encoding (e.g. UTF-8) matches how you save files; most symbols can be typed directly if UTF-8 is used.
• Validate your HTML to catch unrecognized or malformed entities.

By mastering character entities, you ensure that your HTML displays the intended symbols, prevents accidental markup errors, and maintains consistent presentation across browsers and locales.