HTML 5 Character Entities

HTML5 Basics - Part 6

Forward: In this part of the series, we look at what is called, Character Entities.

By: Chrysanthus Date Published: 21 Jul 2012

Introduction

This is part 6 of my series, HTML5 Basics. I assume you have read all the previous parts of the series before coming here. In this part of the series, we look at what is called Character Entities.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Illustration
Consider the following paragraph element:

In mathematics the < symbol is often used.

Note that you have the Less Than sign < inside the content of the paragraph. This less than sign is the open angle bracket. The open angle bracket begins a tag in your text editor. The browser uses this rule to know the beginning of the tag. If we have the < sign in the content of the paragraph element, the browser might consider it as the beginning of a tag. As you can see, this would cause confusion. So if you want the < sign to appear as content in your paragraph, you have to use what is called an entity. You have to use either, &lt or &#60 in your text editor. So, in your code (text editor), you would type the above paragraph as either

 In mathematics the < symbol is often used.

or

 In mathematics the < symbol is often used.

and your browser will display the following:

 In mathematics the < symbol is often used.

Interpreting Character Entities
We now know that

 < means <

and

 < also means <

An entity is code used in text in place of a character (symbol) that has a special meaning in HTML5. A character entity has three parts. It begins with &. When the browser sees ‘&’, it knows that it is dealing with an entity. The second part is either a name or the # sign and a number. ‘lt’ above in the first entity is a name. ‘lt’ stands for “less than”. Even though it is an abbreviation, it is considered as a name in HTML5.

The second part of the entity has to be a name or # and a number. For the Less Than sign if you do not want the second part to be a name, you have to use, “&#60”. Whether, you have used the name or the # and a number, the last part, is a semicolon, that is ‘;’

Note: it is easier to remember the entities (e.g <) that have names, than the entities (e.g. &#60), that have numbers.

Wow, when I started learning programming, I found topics like this interesting. I hope you also find it interesting. Let us continue.

Special Characters
Yes, entities are to be type when you want special characters. In this section, we look at some of the special characters and why they are special.

The reason they are special is simple. Remember, when we talked about attributes; we said that the attribute value should be in double or single quotes. As you can see, quotes are used to identify attribute values. When you type in your text editor, you type content (text), tags and attributes. When the browser receives what you have typed, it has to differentiate between the contents (text) and tags with attributes. So if in your content, you typed a quote, the browser might not be able to differentiate between that and the delimiter (beginning or end) of an attribute value. That explains why the quote is special. A similar reasoning applies to a few other special characters. Some characters like the yen are special because of their unique nature in life.

Here are the most common character entities:

' or ' means apostrophe, that is '
" or " means quotation mark, that is "
< or < means the Less Than Sign, that is <
> or > means the Greater Than Sign, that is >
  or   means non-breaking space
& or & means ampersand, that is &

Some other commonly used character entities are:

¢ or ¢ means cent.
£ or £ means pound
¥ or ¥ means yen
§ or § means section
© or © means copyright
® or ® means registered trademark
× or × means multiplication
÷ or ÷ means division

Non-Breaking Space
With a lot of software (word processor, Text Editor), when you type the spacebar key, you create a space. With the browser and HTML5, that space can be represented by an entity. The entity is, “ ” In HTML5, Non-Breaking is abbreviated to “nb” and Space is abbreviated to “sp”. So you have the entity, “ ”. We saw previously that when you press the spacebar continuously, several times, when designing your web page with your text editor, the browser reduces the number of spaces to one. However, if instead of pressing the spacebar you use the entity, “ ”, the browser will produce a space in place of that entity. So if you want five consecutive spaces, just use this entity five times consecutively. In the following code, the browser will precede the text with five spaces.

<body>
     Love is good.
</body>

In the following code, the browser will precede the text with four spaces:

<body>
    This is it.
</body>

Here, the first space is created by the presence of an entity. Only one space can be created by the spacebar key, and the second space is created by the spacebar key. The third space is created by the presence of the entity. The fourth space is created by the spacebar.

It is good we summaries all what we have learned about the space up to this point: Within any element, if you want one space, use the spacebar key. Within any element, if you want more than one consecutive spaces, use the “ ” entity element. However, within the PRE element, if you want more than one consecutive space, use the spacebar key.

Browsers and Entities
With some browsers, if you type a special character (e.g <) instead of its entity, the browser might still display the character as you expected. However, avoid this practice, as you do not know the conditions under which browsers would display a special character, when it is typed directly and not its entity is typed.

The question you would ask here is, “Would it not be tedious to be typing the entities”. The best way to solve this problem is to get use to typing them.

And that is it. In this part of the series, we have learned that special characters have to be represented by entities. We have seen a good number of the special characters and their corresponding entities.

Rendezvous in the next part of the series.

Chrys

Broad Network

HTML 5 Character Entities

HTML5 Basics - Part 6

Introduction

Related Links

Comments