Advertisement
❮ Previous: HTML Style Guide Next: HTML Emojis ❯

HTML Entities

The reserved characters in HTML must be replaced with character entities.


HTML Entities

Some characters are reserved in HTML and they have special meaning when used in HTML documemt.

If you want to use the lesser than (<) or greater than (>) signs in your document you have to use < for lesser than and > for greater than otherwise the browser might mix them with tags.

The character entities are used to display reserved characters in HTML.


Syntax

A character entity syntax looks like this:

&entity-name;
OR
&#entity-number;

This example shows how to display entities:

Example

<p>To display a lesser than sign (<).</p>

<p>entity name: &lt;</p>

<p>entity number: &#60;</p>

Try this code ❯


Advantage of using an entity name: An entity name is easier to remember.

Disadvantage of using an entity name: Some browsers may not support all entity names, but the support for entity numbers is good.


Non-breaking Space

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

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

This example shows how to use non-breaking space:

Example

<p>1&nbsp;+&nbsp;2&nbsp;=&nbsp;3</p>

Try this code ❯


Advertisement

Some Useful HTML Character Entities

Result Description Entity Name Entity Number
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" double quotation mark &quot; &#34;
' single quotation mark (apostrophe) &apos; &#39;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
euro &euro; &#8364;
Indian Rupee Sign - &#8377;
© copyright &copy; &#169;
® registered trademark &reg; &#174;

Note: Entity names are case sensitive.




Combining Diacritical Marks

A diacritical mark is a glyph added to a letter. Some diacritical marks, like grave (  ̀) and acute (  ́) are called accents.

Mark Character Construct Result
 ̀ a a&#768;
 ́ a a&#769;
̂ a a&#770;
 ̃ a a&#771;
 ̀ O O&#768;
 ́ O O&#769;
̂ O O&#770;
 ̃ O O&#771;

There is more HTML symbols in the next chapter of this tutorial.

❮ Previous: HTML Style Guide Next: HTML Emojis ❯
Advertisement