HTML Entities: A Comprehensive Guide

Understanding HTML Entities: A Comprehensive Guide

When writing HTML, certain characters have special meanings. For instance, the less than (<) and greater than (>) symbols are used to define HTML tags. If you want to display these characters literally as text on your webpage, you need to use HTML entities.

Using the actual < or > characters directly in your text content can confuse the browser, making it interpret them as part of an HTML tag, potentially breaking your page layout or causing unexpected behavior.

What are HTML Entities?

HTML entities are special codes (or placeholders) that represent reserved characters, invisible characters, and symbols that may not be readily available on a standard keyboard or could conflict with the HTML syntax.

There are two primary ways to write an entity:

• Entity Name: A mnemonic code starting with an ampersand (&) and ending with a semicolon (;). Example: < for <. These are often easier to remember.
• Entity Number: A numeric code (based on the character’s Unicode value) starting with an ampersand and hash (&#) and ending with a semicolon (;). Example: < for <.

To display a less than sign (<) we must write: < or <.

Similarly, to display an ampersand (&) itself, you need to use its entity: & or &.

The Non-Breaking Space:  

One of the most commonly used entities is the non-breaking space:   (or  ).

A non-breaking space has two main functions:

1. Preventing Line Breaks: It ensures that words or elements separated by it stay on the same line. This is useful for things like:
   • § 10
   • 10 km/h
   • 10 PM
   • Dr. Smith
2. Forcing Multiple Spaces: Browsers typically collapse multiple consecutive whitespace characters (spaces, tabs, newlines) into a single space. If you need to display multiple visible spaces in a row, you must use   for each space you want to render after the first one. Example: First   Second will display “First Second”.

Similarly, the non-breaking hyphen (‑) prevents a line break at the hyphen, useful for things like phone numbers or identifiers: 555‑1234.

Common and Useful HTML Entities

Below is a comprehensive list of commonly used HTML character entities, categorized for easier reference. This includes the essentials, currency, mathematical symbols, arrows, and more based on the HTML5 specification.

Essential & Basic Entities

Result	Description	Name	Number
	non-breaking space
<	less than	<	<
>	greater than	>	>
&	ampersand	&	&
“	double quotation mark	"	"
‘	single quotation mark (apostrophe)	'	'

Currency Symbols

Result	Description	Name	Number
¢	cent	¢	¢
£	pound	£	£
¥	yen	¥	¥
€	euro	€	€
¤	currency	¤	¤
₹	Indian Rupee	₹	₹
₽	Ruble sign	₽	₽

 

Legal & Trademark Symbols

Result	Description	Name	Number
©	copyright	©	©
®	registered trademark	®	®
™	trademark	™	™
℠	Service Mark	℠	℠

 

Common Punctuation & Symbols

Result	Description	Name	Number
§	section sign	§	§
¶	paragraph sign (pilcrow)	¶	¶
•	bullet	•	•
…	horizontal ellipsis	…	…
′	prime (minutes, feet)	′	′
″	double prime (seconds, inches)	″	″
‹	single left-pointing angle quotation mark	‹	‹
›	single right-pointing angle quotation mark	›	›
«	left-pointing double angle quotation mark	«	«
»	right-pointing double angle quotation mark	»	»
–	en dash	–	–
—	em dash	—	—
‘	left single quotation mark	‘	‘
’	right single quotation mark (apostrophe)	’	’
“	left double quotation mark	“	“
”	right double quotation mark	”	”
†	dagger	†	†
‡	double dagger	‡	‡
¿	inverted question mark	¿	¿
¡	inverted exclamation mark	¡	¡

 

Mathematical Symbols

Result	Description	Name	Number
±	plus-minus sign	±	±
×	multiplication sign	×	×
÷	division sign	÷	÷
≠	not equal to	≠	≠
≈	almost equal to	≈	≈
≤	less than or equal to	≤	≤
≥	greater than or equal to	≥	≥
√	square root	√	√
∞	infinity	∞	∞
∑	n-ary summation	∑	∑
∫	integral	∫	∫
°	degree sign	°	°
µ	micro sign	µ	µ
∂	partial differential	∂	∂
‰	per mille sign	‰	‰
∀	for all	∀	∀
∃	there exists	∃	∃
∅	empty set	∅	∅
∇	nabla	∇	∇
∈	element of	∈	∈
∉	not an element of	∉	∉
∋	contains as member	∋	∋
∏	n-ary product	∏	∏

 

Greek Letters (Selection)

Result	Description	Name	Number
Α	Greek capital letter alpha	Α	Α
α	Greek small letter alpha	α	α
Β	Greek capital letter beta	Β	Β
β	Greek small letter beta	β	β
Γ	Greek capital letter gamma	Γ	Γ
γ	Greek small letter gamma	γ	γ
Δ	Greek capital letter delta	Δ	Δ
δ	Greek small letter delta	δ	δ
Ε	Greek capital letter epsilon	Ε	Ε
ε	Greek small letter epsilon	ε	ε
Ω	Greek capital letter omega	Ω	Ω
ω	Greek small letter omega	ω	ω

 

Arrows

Result	Description	Name	Number
←	leftwards arrow	←	←
↑	upwards arrow	↑	↑
→	rightwards arrow	→	→
↓	downwards arrow	↓	↓
↔	left right arrow	↔	↔
↵	downwards arrow with corner leftwards (carriage return)	↵	↵
⇐	leftwards double arrow	⇐	⇐
⇑	upwards double arrow	⇑	⇑
⇒	rightwards double arrow	⇒	⇒
⇓	downwards double arrow	⇓	⇓
⇔	left right double arrow	⇔	⇔

 

Miscellaneous Symbols

Result	Description	Name	Number
♠	black spade suit	♠	♠
♣	black club suit	♣	♣
♥	black heart suit	♥	♥
♦	black diamond suit	♦	♦
✓	check mark	✓	✓
✗	ballot x	✗	✗
★	black star	★	★
☆	white star	☆	☆
♀	female sign	♀	♀
♂	male sign	♂	♂
♪	eighth note	♪	♪
♭	music flat sign	♭	♭
♮	music natural sign	♮	♮
♯	music sharp sign	♯	♯

 

 

Combining Diacritical Marks

Beyond replacing single characters, HTML entities (specifically, numeric entities) can be used to add diacritical marks (like accents) to letters. This works by placing the combining mark entity *after* the character it should modify.

A diacritical mark is a glyph added to a letter. Some common examples include the grave accent (̀) and the acute accent (́).

Here are some examples:

 

Diacritical Mark Examples

Mark Entity	Base Character	HTML Construct	Result
` (̀)	a	à	à
´ (́)	a	á	á
ˆ (̂)	a	â	â
˜ (̃)	a	ã	ã
` (̀)	O	Ò	Ò
´ (́)	O	Ó	Ó
ˆ (̂)	O	Ô	Ô
˜ (̃)	O	Õ	Õ
¨ (̈)	u	ü	ü

 

While many accented characters have their own dedicated entities (e.g., é for é), combining marks offer flexibility for characters not predefined in the named entity list.

 

 

Conclusion

HTML entities are essential for correctly displaying reserved characters, special symbols, and controlling whitespace in your web pages. While entity numbers work for any Unicode character, entity names are often preferred for common symbols due to their readability. Understanding and using them correctly ensures your HTML is robust and renders as intended across different browsers.