Some characters are reserved in HTML.
If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.
Character entities are used to display reserved characters in HTML.
Sometimes it becomes necessary to use special symbols on web-page, for example, a copyright symbol © or registered trademark symbol ® along with the HTML-tags. But symbol © and ® is absent on keyboard and if you write HTML tag in page text, browser will show the result of used tag, but not tag itself. For using such symbols, one is required to use HTML entities. Using these entities you can display any symbol on the page.
To become aware of reserved characters, we must use character entities in the HTML source code. You must know some characters are reserved in HTML. It is not possible to use them.
Notation of Entities:
A character entity reference consists of an ampersand (&), followed by a pound sign (#), the number of the character entity, and finishing with a semi-colon (;). Alternately, for some characters you can put ampersand, the name of the character (but no # sign), followed by a semi-colon.
Areas of Entities:
There are various categories, where HTML Entities are used:
- Entities for mathematical and technical characters (including Greek) i.e. ≥
- Entities for punctuation characters i.e. ¦
- Entities for accented characters, accents, and other diacritics from Western European Languages i.e. Å
- Entities for characters with special meaning in HTML. i.e. &
- Entities for shapes and arrows i.e. ->
To display HTML entities (reserved character) we have to use in script with listed syntax. Syntax will be like this: &Entity_name; or &#Entity_number.
One should remember that entities are case sensitive and the advantage of using an entity name, instead of a number, is that the name is easier to remember which in turn proves disadvantageous as browsers does not support all entity names.
Now the tutorial will deal with how to print or display special/reserved character on web pages using HTML coding including two methods. First of all, we are going to print one character entities using its name.
Listing 1: Displaying HTML Entities Character using Entities name
<!DOCTYPE html> <html> <body> <h3> Copyright Symbol: </h3> <h3>HTML Entities Example: </h3> <p>©</p> <p>©</p> <p> This Copyright symbol is not present on Standard keyboard. We are using HTML script to print it no web page. </p> </body> </html>
Figure 1: Above figure is output of script of printing copyright symbol using its entity name
You can also use numeric character references to write character entities. Numeric character references can be defined with either a decimal or hexadecimal value (decimal is commonly used); is © (decimal) and © (hexadecimal) is the numeric character reference for the copyright symbol. Script of this section will cover both methods to display the character entities.
Most importantly numeric character references can be used to specify any Unicode character, whereas entities can only specify some. Let’s write a example.
Listing 2: Displaying HTML Entities Character using Numeric Character References
<!DOCTYPE html> <html> <body> <h3> Pound and Copyright Symbol (Numeric Character References) </h3> <h3>HTML Entities Example: </h3> <p>®</p> <p>©</p> <p>©</p> <p> Above two character entities is printed by its numeric values and third one is printed by its hexadecimal value </p> </body> </html>
Figure 2: Above figure is output of, script of printing copyright symbol using its numeric value and hexadecimal value.
The most used character entity in HTML is the non breaking space (&nbps;).To add spaces to your text, you can use the character entity. Browser will always truncate spaces in HTML pages. If you write 5 &nbps; in your text, the browser will remove 4 of them, before displaying the web pages.
As you can see that HTML entities holds both values of name and number. Some older browsers do not support name values, but it is unlikely that someone will run into this problem today.
Remember to use the entity code for within your text. Otherwise you might find strange errors occurring all over the place that you can’t pinpoint; actually because the browser will mix them with tags.
ISO 8859-1 Symbol Entities
| Result | 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 | ÷ | ÷ |