The present tutorial will deal with concept of entities in HTML. At the end of this lesson you will be able to understand the meaning of special character (Reserved character) used 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.
Example given below will cover the idea to print various HTML character entities in one line. For space we have declared one &nbps; after one HTML character entity.
Listing 3: Some Character Entities
<!DOCTYPE html> <html> <body> <h3> List of HTML Character Entities:</h3> <h3>HTML Entities List Using its Numeric Values: </h3> <p> &#161; ¤ ¢ £ ¥ ¦ ¨ © ª « ¬ ­ ® ™ ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ × ÷ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Ö Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í ï ð ñ ò ó ô õ ö ø ù ú û ü ý þ ÿ Œ Š š Ÿ ˆ ˜       ‌ ‍ ‏ – — ‘ ’ ‚ “ ”  „ † ‡ … ‰ ‹ › € </p> <p> This is not complete list but various character entities are covering in this list. </p> </body> </html>
Figure 3: Above figure showing the output of the script of HTML entities character list in which each character have been printed serially with space.
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.
This article has covered the basic understanding of displaying HTML character entities. You can use in your website and display the special chars. Go through the examples given with this article and let us know in case of any issues.