HTML Entities

Display reserved characters and symbols safely in HTML.

When creating webpages, there are times when you need to display special characters that HTML normally interprets as part of its code. For example, if you want to display the < or > symbols on a webpage, the browser may think you are writing an HTML tag.

To solve this problem, HTML provides entities.

HTML entities allow you to display reserved characters, symbols, and special characters safely on a webpage.

What Are HTML Entities?

An HTML entity is a special code used to represent a character that might otherwise be interpreted incorrectly by the browser.

Entities usually start with an ampersand and end with a semicolon.

Example:

HTML
&lt;

This entity displays:

devbrainbox.local/output

<

Without the entity, the browser could mistake the symbol for the start of an HTML tag.

Why Are Entities Important?

Entities help when you need to display:

  • Reserved HTML characters
  • Currency symbols
  • Copyright symbols
  • Mathematical symbols
  • Non-breaking spaces

They ensure that content is displayed exactly as intended.

Reserved Character Entities

Some characters have special meaning in HTML and must be written as entities when displayed as text.

Less Than (<)

HTML
&lt;

Output:

devbrainbox.local/output

<

Greater Than (>)

HTML
&gt;

Output:

devbrainbox.local/output

>

Ampersand (&)

HTML
&amp;

Output:

devbrainbox.local/output

&

Double Quote (")

HTML
&quot;

Output:

devbrainbox.local/output

"

These entities prevent conflicts with HTML syntax.

Common Symbol Entities

HTML also provides entities for many commonly used symbols.

Copyright Symbol

HTML
&copy;

Output:

devbrainbox.local/output

©

Registered Trademark

HTML
&reg;

Output:

devbrainbox.local/output

®

Trademark Symbol

HTML
&trade;

Output:

devbrainbox.local/output

These symbols are often used in company websites and product pages.

Currency Symbols

Entities can display currency symbols used around the world.

Indian Rupee

HTML
&#8377;

Output:

devbrainbox.local/output

Dollar

HTML
&#36;

Output:

devbrainbox.local/output

$

Euro

HTML
&euro;

Output:

devbrainbox.local/output

This is useful for e-commerce and financial websites.

Non-Breaking Space

Normally, browsers combine multiple spaces into a single space.

Example:

HTML
Hello     World

Output:

devbrainbox.local/output

Hello World

To create an extra space, use:

HTML
&nbsp;

Example:

HTML
Hello&nbsp;&nbsp;&nbsp;World

Output:

devbrainbox.local/output

Hello World

Best Practices

When using HTML entities:

  • Use entities for reserved HTML characters.
  • Use symbol entities instead of copying special characters from other sources.
  • Use non-breaking spaces sparingly for spacing.
  • Test symbols across different browsers and devices.

This helps ensure consistent display and better compatibility.

Key Takeaways

  • Entities is an important topic to understand.
  • Start with small examples and practice one step at a time.
  • Use the idea in simple projects so it becomes easier to remember.

More HTML Entities

Use this table as a quick reference for other common symbols and their entity codes.

SymbolNameEntity code
SpaceNon-breaking space&nbsp;
©Copyright&copy;
®Registered trademark&reg;
Trademark&trade;
Euro&euro;
£Pound&pound;
¥Yen&yen;
¢Cent&cent;
§Section&sect;
Paragraph&para;
°Degree&deg;
±Plus or minus&plusmn;
×Multiplication&times;
÷Division&divide;
Left arrow&larr;
Right arrow&rarr;