← Back to HTML Course | Chapter 4: Semantics & Entities | Lesson 3 of 10

HTML Entities

Imagine you are writing a manual about HTML tags. You want to display the characters '<' and '>' as plain text on your webpage. However, the browser reads those characters as instructions to start a new tag, which can break your page layout. HTML entities are like code names or keyboard shortcuts for reserved characters. They allow you to safely display characters that have special meaning in HTML without confusing the browser. They also let you insert symbols that are not found on standard keyboards, like copyright signs or currency symbols, using simple codes.

In this page:

  1. Reserved Characters
  2. The Non-Breaking Space (nbsp)
  3. Currency Symbols
  4. Trademark and Copyright Symbols
  5. Combining Multiple Entities Safely
  6. Common HTML Entities Reference Table
  7. Numeric vs Named Entities vs Unicode
Syntax
markup 
&entity_name;
&#entity_number;

Reserved Characters

Characters like <, >, and & are reserved by HTML to parse tags. To display these characters as plain text on your webpage, you must replace them with their corresponding HTML entity codes.

Note: All HTML entities start with an ampersand (&) and end with a semicolon (;).
Warning: Failing to escape a less-than sign (<) can cause the browser to mistake your text for a broken HTML tag.

Example: Reserved Characters

markup 
<p>Use &lt;div&gt; to create a division, and &amp; for an ampersand.</p>

The Non-Breaking Space (nbsp)

Normally, browsers collapse multiple spaces in your code into a single space. The non-breaking space entity ( ) prevents the browser from collapsing your spaces and keeps the wrapped words from breaking onto a new line.

Note: Use non-breaking spaces to keep units of measurement or short dates bound together on the same line.
Warning: Avoid using   repeatedly to create large layout margins; use CSS margins instead.

Example: The Non-Breaking Space (nbsp)

markup 
<p>10&nbsp;km</p>

Currency Symbols

Since standard keyboards do not have keys for foreign currencies like Euros, Pounds, or Yen, HTML provides easy-to-use entity codes to display these currency symbols cleanly on your page.

Note: You can use either the named entity (like €) or the numbered entity (like €) to render currency symbols.
Warning: Double-check your currency codes to make sure your pricing tables show the correct symbols.

Example: Currency Symbols

markup 
<p>&euro;20, &pound;15, &yen;500</p>

Trademark and Copyright Symbols

Adding trademark and copyright symbols is essential for branding and legal protection. HTML provides simple, universally supported entities to render these standard legal characters.

Note: Use the named entity © to quickly add a copyright symbol to your page footer.
Warning: Always write these codes in lowercase to make sure they render correctly on older mobile browsers.

Example: Trademark and Copyright Symbols

markup 
<p>&copy; 2024 MyCompany&trade;</p>

Combining Multiple Entities Safely

You can use multiple HTML entities in a single line of code to write mathematical formulas, technical explanations, or legal notices without breaking your page layout.

Note: Keep your code tidy by using spacing and line breaks when writing dense blocks of entities.
Warning: Ensure you include the closing semicolon on every entity to prevent rendering bugs.

Example: Combining Multiple Entities Safely

markup 
<p>5 &lt; 10 &amp; 10 &gt; 5</p>

Common HTML Entities Reference Table

A handful of entities come up constantly in everyday HTML: &amp; for an ampersand, &lt; and &gt; for angle brackets, &quot; for a straight double quote, &copy; for the copyright symbol, and &nbsp; for a non-breaking space.

Keeping these few in memory covers the vast majority of real-world cases.

Note: Bookmark a full HTML entity reference chart for the rare symbols you will not remember by heart, like fractions or arrows.
Warning: Forgetting to escape a literal ampersand as &amp; inside an href like a search query URL can quietly break the link in some browsers.

Example: Common HTML Entities Reference Table

markup 
<p>&amp; &lt; &gt; &quot; &copy; &nbsp;</p>

Numeric vs Named Entities vs Unicode

A named entity like &copy; is easy to read and remember. A numeric entity like &#169; represents the exact same character using its Unicode code point number, and works even in older systems that might not recognize every named entity.

Since modern files are saved as UTF-8, you can often just type the actual Unicode character, like © directly, and skip entities entirely.

Note: For modern websites saved as UTF-8, typing the real character directly, like © or ★, usually works fine and is simpler than remembering entity codes.
Warning: Entities remain necessary for HTML's own reserved characters, like < and &, no matter how modern your file encoding is — those must always be escaped.

Example: Numeric vs Named Entities vs Unicode

markup 
<p>&copy; is the same as &#169; is the same as ©</p>
Live Example
Related Topics

HTML Style Guide · HTML Symbols · HTML Semantics · HTML Emojis

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting to include the required semicolon (;) at the end of your HTML entity codes.
  2. Failing to escape raw ampersands (&) inside your standard paragraph texts.
  3. Using the wrong entity code (like writing © in uppercase as ©), which can fail to render on older browsers.
Chapter Summary
  • HTML entities prevent browsers from misinterpreting reserved characters (like <, >, and &) as code.
  • All HTML entities start with an ampersand (&) and end with a semicolon (;).
  • Use entities to display reserved HTML characters, currencies, trademarks, and non-breaking spaces safely on your webpage.
Browser Support

Standard HTML entity codes are natively supported by all browsers and assistive devices.

🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson HTML Style Guide Next Lesson → HTML Symbols

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.