Learn HTML Entities

Tips (Total 5)

1. What is HTML Entities

2. How to use HTML Character Entities

3. How to add Non-breaking Space

4. Some Useful HTML Character Entities

5. How to combinine Diacritical Marks

# Tips-1) What is HTML Entities

Reserved characters in HTML must be replaced with entities:

< (less than) = <
> (greather than) = >

# Tips-2) How to use HTML Character Entities

Some characters are reserved in HTML.

If you use the less than (<) or greater than (>) signs in your HTML text, the browser might mix them with tags.

Entity names or entity numbers can be used to display reserved HTML characters.

Entity names look like this:

&entity_name;

Entity numbers look like this:

&#entity_number;

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

Entity names are easier to remember than entity numbers.

# Tips-3) How to add Non-breaking Space

A commonly used HTML entity is the non-breaking space:  

A non-breaking space is a space that will not break into a new line.

Two words separated by a non-breaking space will stick together (not break into a new line). This is handy when breaking the words might be disruptive.

Examples:

§ 10
10 km/h
10 PM

Another common use of the non-breaking space is to prevent browsers from truncating spaces in HTML pages.

If you write 10 spaces in your text, the browser will remove 9 of them. To add real spaces to your text, you can use the   character entity.

The non-breaking hyphen (‑) is used to define a hyphen character (‑) that does not break into a new line.

# Tips-4) Some Useful HTML Character Entities

Some Useful HTML Character Entities

Result	Description	Name	Number
	non-breaking space

<	less than	<	<
>	greater than	>	>
&	ampersand	&	&
"	double quotation mark	"	"
'	single quotation mark	'	'
¢	cent	¢	¢
£	pound	£	£
¥	yen	¥	¥
€	euro	€	€
©	copyright	©	©
®	trademark	®	®

Note

Entity names are case sensitive.

Display a none-breaking-space

non-breaking space

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>HTML Entity Example</h1>

<h2>A space character: &nbsp;</h2>

</body>
</html>

Output should be:

Display a less-than sign

less than

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>HTML Entity Example</h1>

<h2>The less-than sign: &lt;</h2>

</body>
</html>

Output should be:

Display a greater-than sign

greater than

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>HTML Entity Example</h1>

<h2>The greater-than sign: &gt;</h2>

</body>
</html>

Output should be:

Display an ampersand

double quotation mark

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>HTML Entity Example</h1>

<h2>The ampersand (and) sign: &amp;</h2>

</body>
</html>

Output should be:

Display an apostrophy sign

single quotation mark

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>HTML Entity Example</h1>

<h2>The single quote sign: &apos;</h2>

</body>
</html>

Output should be:

Display a cent sign

cent

Display a cent sign

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>HTML Entity Example</h1>

<h2>The cent sign: &cent;</h2>

</body>
</html>

Output should be:

Display a pound sign

pound

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>HTML Entity Example</h1>

<h2>The pound sign: &pound;</h2>

</body>
</html>

Output should be:

Display the yen sign

yen

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>HTML Entity Example</h1>

<h2>The yen sign: &yen;</h2>

</body>
</html>

Output should be:

Display a euro sign

€

euro

€

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>HTML Entity Example</h1>

<h2>The euro sign: &euro;</h2>

</body>
</html>

Output should be:

Display a copyright sign

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>HTML Entity Example</h1>

<h2>The copyright sign: &copy;</h2>

</body>
</html>

Display the registered trade mark sign

trademark

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>HTML Entity Example</h1>

<h2>The registered trade mark sign: &reg;</h2>

</body>
</html>

Output should be:

# Tips-5) How to combinine Diacritical Marks

A diacritical mark is a "glyph" added to a letter.

Some diacritical marks, like grave ( ̀) and acute ( ́) are called accents.

Diacritical marks can be used in combination with alphanumeric characters to produce a character that is not present in the character set (encoding) used in the page.

Here are some examples:

Mark	Character	Construct	Result
̀	a	à	à

́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

Display a character with a grave accent

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>HTML Special Character Example</h1>

<h2>An a with a grave accent: a&#768;</h2>

</body>
</html>

Output should be:

Display a character with a acute accent

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>HTML Special Character Example</h1>

<h2>An a with an acute accent: a&#769;</h2>

</body>
</html>

Output should be:

Display a character with a circumflex accent

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>HTML Special Character Example</h1>

<h2>An a with a circumflex accent: a&#770;</h2>

</body>
</html>

Output should be:

Display a character with a tilde

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>HTML Special Character Example</h1>

<h2>An a with a tilde: a&#771;</h2>

</body>
</html>

Output should be:

Display a character with a grave accent

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>HTML Special Character Example</h1>

<h2>An o with a grave accent: o&#768;</h2>

</body>
</html>

Output should be:

Display a character with a acute accent

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>HTML Special Character Example</h1>

<h2>An o with an acute accent: o&#769;</h2>

</body>
</html>

Output should be:

Display a character with a circumflex accent

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>HTML Special Character Example</h1>

<h2>An o with a circumflex accent: o&#770;</h2>

</body>
</html>

Output should be:

Display a character with a tilde

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>HTML Special Character Example</h1>

<h2>An o with a tilde: o&#771;</h2>

</body>
</html>