HTML Entities Tutorial with Examples

HTML Entity
Entity Name vs Entity Number
Non-breaking Space ( )
List of entities

1. HTML Entity

There are a few special characters that if they appear in an HTML document, they may cause some misunderstanding to the HTML source parser. For instance, when the HTML source parser comes across the "smaller" (<) character, it possibly mistakes the character for a tag. Therefore, to avoid misunderstanding, HTML uses the entity < in place of the ( < ) character.

Here are some common characters that need to be replaced by entities. About the full list, you can see it at the end of this article.

Character	Description	Entity Name
	Non-breaking Space
<	Less than	<
>	Greater than	>
&	Ampersand	&
"	Double quotation mark	"
'	Single quotation mark (apostrophe)	'

Take a look at an HTML document with the presence of entities and the results you see in the browser.

entity-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Entities</title>
    <meta charset="UTF-8">
</head>
<body>
    <h3>Entities example:</h3>
    HTML defines six levels of headings. <br/>
    The heading elements are: <br/><br/>
    &lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, &lt;h6&gt; 
</body>
</html>

In addition to the entities representing the mistaken characters mentioned above, there is a list of many entities that represent other special characters (£ § ¢ ¥ © ...)

Character	Description	Entity Name
¢	cent	¢
£	pound	£
¥	yen	¥
§	section	§
©	copyright	©
®	registered trademark	®

Note: You can see a full list of HTML entities at the end of this article.

2. Entity Name vs Entity Number

There are two ways you can refer to an entity. One is to use the "Entity name" and the other way is the "Entity number". For instance, in order to refer to the (<) character, you can possibly use the entity name ( < ) or the entity number ( < ).

&entity_name;

&#entity_number;

The advantage of using an entity name is that it is easy to remember. However, the downside is that some browsers may not fully support all the entity names, whereas they do support entity numbers entirely.

Display	Description	Entity Name	Entity Number
	Non-breaking space
<	Less than	<	<
>	Greater than	>	>
&	Ampersand	&	&
"	Double quotation mark	"	"
'	Single quotation mark (apostrophe)	'	'

Note: You can find the full list of HTML entities with their names and numbers at the end of this article.

3. Non-breaking Space ( )

The entity is used to replace the non-breaking space. Let me give an example to illustrate the point:

non-breaking-space-example.html

<p style="font-size:40px">
    This&nbsp;is&nbsp;a&nbsp;non&nbsp;breaking&nbsp;Sentence&nbsp;&nbsp;&nbsp;!!
</p>
<p style="font-size:40px">
    This sentence will be line breaks.
</p>

4. List of entities

ISO 8859-1 Symbol Entities

Display	Description	Entity Name	Number Code
	non-breaking space
¡	inverted exclamation mark	¡	¡
¤	currency	¤	¤
¢	cent	¢	¢
£	pound	£	£
¥	yen	¥	¥
¦	broken vertical bar	¦	¦
§	section	§	§
¨	spacing diaeresis	¨	¨
©	copyright	©	©
ª	feminine ordinal indicator	ª	ª
«	angle quotation mark (left)	«	«
¬	negation	¬	¬
	soft hyphen
®	registered trademark	®	®
™	trademark	™	™
¯	spacing macron	¯	¯
°	degree	°	°
±	plus-or-minus	±	±
²	superscript 2	²	²
³	superscript 3	³	³
´	spacing acute	´	´
µ	micro	µ	µ
¶	paragraph	¶	¶
·	middle dot	·	·
¸	spacing cedilla	¸	¸
¹	superscript 1	¹	¹
º	masculine ordinal indicator	º	º
»	angle quotation mark (right)	»	»
¼	fraction 1/4	¼	¼
½	fraction 1/2	½	½
¾	fraction 3/4	¾	¾
¿	inverted question mark	¿	¿
×	multiplication	×	×
÷	division	÷	÷

ISO 8859-1 Character Entities

Display	Description	Entity Name	Number Code
À	capital a, grave accent	À	À
Á	capital a, acute accent	Á	Á
Â	capital a, circumflex accent	Â	Â
Ã	capital a, tilde	Ã	Ã
Ä	capital a, umlaut mark	Ä	Ä
Å	capital a, ring	Å	Å
Æ	capital ae	Æ	Æ
Ç	capital c, cedilla	Ç	Ç
È	capital e, grave accent	È	È
É	capital e, acute accent	É	É
Ê	capital e, circumflex accent	Ê	Ê
Ë	capital e, umlaut mark	Ë	Ë
Ì	capital i, grave accent	Ì	Ì
Í	capital i, acute accent	Í	Í
Î	capital i, circumflex accent	Î	Î
Ï	capital i, umlaut mark	Ï	Ï
Ð	capital eth, Icelandic	Ð	Ð
Ñ	capital n, tilde	Ñ	Ñ
Ò	capital o, grave accent	Ò	Ò
Ó	capital o, acute accent	Ó	Ó
Ô	capital o, circumflex accent	Ô	Ô
Õ	capital o, tilde	Õ	Õ
Ö	capital o, umlaut mark	Ö	Ö
Ø	capital o, slash	Ø	Ø
Ù	capital u, grave accent	Ù	Ù
Ú	capital u, acute accent	Ú	Ú
Û	capital u, circumflex accent	Û	Û
Ü	capital u, umlaut mark	Ü	Ü
Ý	capital y, acute accent	Ý	Ý
Þ	capital THORN, Icelandic	Þ	Þ
ß	small sharp s, German	ß	ß
à	small a, grave accent	à	à
á	small a, acute accent	á	á
â	small a, circumflex accent	â	â
ã	small a, tilde	ã	ã
ä	small a, umlaut mark	ä	ä
å	small a, ring	å	å
æ	small ae	æ	æ
ç	small c, cedilla	ç	ç
è	small e, grave accent	è	è
é	small e, acute accent	é	é
ê	small e, circumflex accent	ê	ê
ë	small e, umlaut mark	ë	ë
ì	small i, grave accent	ì	ì
í	small i, acute accent	í	í
î	small i, circumflex accent	î	î
ï	small i, umlaut mark	ï	ï
ð	small eth, Icelandic	ð	ð
ñ	small n, tilde	ñ	ñ
ò	small o, grave accent	ò	ò
ó	small o, acute accent	ó	ó
ô	small o, circumflex accent	ô	ô
õ	small o, tilde	õ	õ
ö	small o, umlaut mark	ö	ö
ø	small o, slash	ø	ø
ù	small u, grave accent	ù	ù
ú	small u, acute accent	ú	ú
û	small u, circumflex accent	û	û
ü	small u, umlaut mark	ü	ü
ý	small y, acute accent	ý	ý
þ	small thorn, Icelandic	þ	þ
ÿ	small y, umlaut mark	ÿ	ÿ

Other entities are supported by browsers.

Display	Description	Entity Name	Number Code
Œ	capital ligature OE	&OElig;	Œ
œ	small ligature oe	&oelig;	œ
Š	capital S with caron	&Scaron;	Š
š	small S with caron	&scaron;	š
Ÿ	capital Y with diaeres	&Yuml;	Ÿ
ˆ	modifier letter circumflex accent	&circ;	ˆ
˜	small tilde	&tilde;	˜
	en space	&ensp;
	em space	&emsp;
	thin space
‌	zero width non-joiner	&zwnj;	‌
‍	zero width joiner	&zwj;	‍
‎	left-to-right mark	&lrm;	‎
‏	right-to-left mark	&rlm;	‏
–	en dash	–	–
—	em dash	—	—
‘	left single quotation mark	‘	‘
’	right single quotation mark	’	’
‚	single low-9 quotation mark	&sbquo;	‚
“	left double quotation mark	“	“
”	right double quotation mark	”	”
„	double low-9 quotation mark	&bdquo;	„
†	dagger	&dagger;	†
‡	double dagger	&Dagger;	‡
…	horizontal ellipsis	…	…
‰	per mille	&permil;	‰
‹	single left-pointing angle quotation	&lsaquo;	‹
›	single right-pointing angle quotation	&rsaquo;	›
€	euro	€	€

HTML Entities Tutorial with Examples

1. HTML Entity

2. Entity Name vs Entity Number

3. Non-breaking Space ( )

4. List of entities

HTML Tutorials

HTML Tutorials

Newest Articles

HTML Entities Tutorial with Examples

1. HTML Entity

2. Entity Name vs Entity Number

3. Non-breaking Space (&nbsp;)

4. List of entities

HTML Tutorials

HTML Tutorials

Newest Articles

3. Non-breaking Space ( )