HTML Entities and Symbols.

HTML entities are used to display reserved characters (like < or >) and special symbols (like symbols, emojis, or currency) that aren't on your keyboard.

The Essentials

Entities start with an ampersand (&) and end with a semicolon (;).

< and > are used for less-than and greater-than symbols.

& is used for the ampersand symbol.

  is a non-breaking space (it prevents a line break).

Numeric codes like 😀 can be used for emojis (😀).

Professional Insights

Reserved Characters

Browsers interpret < and > as tags. If you want to show the text '5 < 10', you must write '5 < 10' or the browser might think you are starting a new tag.

Non-Breaking Space ( )

Use   when you want two words to stay on the same line together (e.g., '10 km'). It prevents the browser from splitting them up.

Unicode and UTF-8

Modern HTML5 uses UTF-8 by default, which supports almost every character in existence. This means you can often type emojis directly into your code, but entities are safer for legacy systems.

HTML Symbols

There are thousands of symbols for math (∏, ∑), currency (¢, £, €), and arrows (←, ↑, →, ↓) available via entities.

Critical Pitfalls

Using < and > directly in text, which can cause rendering bugs.

Overusing   for layout spacing instead of using CSS margins.

Thinking all emojis have easy-to-remember names; most require numeric codes.

Interactive Lab

Sprint Tasks

Display the text: '5 < 10' using entities

Loading editor...

Production Preview