What exactly are entities in HTML?

A problem

Let's say you want to add the less-than symbol, <, literally inside a <p> element (or for that matter, in any element). How could you do so?

Well, you might go on and do the following:

<p>2 < 3</p>

This works, at least in this case, but it is NOT considered a good practice at all. The < character is reserved for a special purpose in HTML, i.e. to denote the beginning of a tag. Therefore, it must not be used as it is in code.

To better understand this, let's say you want to denote the text "This is <code>" literally in HTML. You couldn't do the following:

<p>This is <code></p>

since <code> will be treated as an element, NOT literally as the text "<code>" (which is what you desire).

So what to do now?

The correct way to literally denote the character "<" (which is otherwise reserved for a special purpose) is to use an HTML entity.

What are entities?

An HTML entity, or simply entity, is a sequence of multiple characters that, as a unit, denotes a single character in the final HTML output. It begins with an ampersand (&) and ends with a semicolon (;). Between these we put some characters to altogether represent another character.

There are multiple ways of specifying an entity:

• Named entities — a short abbreviation is used to represent the underlying character.
• Numeric entities — the code point of the underlying character is expressed as a decimal integer or a hexadecimal integer.

Let's now see how to denote < using an entity.

The entity for <

From mathematics, recall that the < symbol is called the less-than symbol. In HTML, the named entity < denotes this character. (You can obviously guess what "lt" means here.)

When an HTML parser encounters <, it realizes that it's an entity. Likewise, it goes through its large collection of named entities and deduces that < corresponds to <, and likewise replaces < with < in the final output.

The source code would obviously still contain < but the rendered output would be different, containing the < character.

Here's a quick example of using <:

<p>2 &lt; 3</p>

Commonly used named entities

HTML defines a jaw-dropping amount of named entities, covering a huge variety of characters and symbols from a diverse set of languages and areas of study.

Let's take a look at some of the most commonly used ones.

Non-breaking spaces

Recall the fact that in HTML, each and every sequence of whitespace characters (spaces, tabs, newlines, etc.) is replaced with a single whitespace character.

A non-breaking space character, however, doesn't get treated as such in HTML even though it produces whitespace. So what does this mean? Let's find out.

Denoted as  , a non-breaking space represents a space character that follows two basic rules:

• It does NOT get treated as a regular whitespace character, which means that it remains in the output as it is in the code.
• It does NOT allow the breaking of text (i.e. when a line is broken down into two lines after a word, typically at a whitespace).

Expanding upon the first rule, if you have 10   entities, you'll get exactly 10 corresponding space characters in the output — HTML doesn't strip these off.

Following is an example:

<p>Here we have 5 spaces: "     "</p>
<p>Here we have 5 non-breaking spaces: "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"</p>

The sequence of normal space characters in the first <p> gets reduced down to one single space (as per the default behavior of HTML). However, in the second <p>, the sequence of non-breaking spaces, each denoted as   show up as they are written in the source code.

The   entity can be really handy when you just want to add an extra space or two somewhere in you HTML but don't necessarily want the power of preformatting (e.g. <pre>) for this.

The second rule, which is where the non-breaking space character gets its name from, means that a line of text couldn't be broken down at this character unlike how it could be broken down at a regular space.

Shown below is an example:

<p>This is an overflowing word.</p>
<p>This is an overflowing&nbsp;word.</p>

There are two paragraphs with the same text except for that the second one has a non-breaking space between "overflowing" and "word" (and hence the second paragraph couldn't be broken down at this space).

Take a look at both the paragraphs as follows when a custom width is applied to them — they produce different outputs:

• In the first paragraph, the space after "overflowing" is taken to be the breaking point for the line of text, simply because it's a regular space and the browser knows that it can break at a regular space.
• In the second paragraph, however, there is a non-breaking space after "overflowing" which the browser can't break at; it instead breaks the line of text at the space following "an" (since that's a regular space).

Less-than (<) and greater-than (>)

You already saw the < entity in the section above but let's quickly see it once again, along with its sibling, >.

The less-than (<) symbol is denoted via the < entity while the greater-than (>) symbol is denoted via the > entity.

If you wish to use either of these symbols (< and >) in your HTML, you must use their corresponding entities, since both the symbols are reserved for a special purpose in HTML, i.e. to denote HTML tags.

The following code solves the problem presented at the start of this article — to represent the text "This is <code>" in HTML:

<p>This is &lt;code&gt;</p>

Voila! Just as desired.

Ampersand (&)

Suppose you want to represent literally the text "&gt;" in HTML. How would you do so?

Well, if you write > as it is, you'll obviously get the corresponding > character, not the text itself, as can be seen below:

<p>Greater-than (&gt;)</p>

What you need to do here is to replace the ampersand (&) from > so that it isn't treated as an entity by the browser. And that's exactly where & enters the game.

The ampersand (&) character is given by the named entity &.

Coming back to the question, to represent "&gt;" literally in HTML, you just need to use & in place of the & character. The following code demonstrates this:

<p>Greater-than (&amp;gt;)</p>

Numeric entities

While there are hundreds and hundreds of named entities in HTML, they still don't altogether represent the complete set of characters possible in Unicode.

For that, we need the second kind — numeric entities that specify the code point associated with a given character, as a decimal or hexadecimal integer.

• For a decimal representation, the code point is written as it is between the & and ; characters, prefixed with #.
• For a hexadecimal representation, the code point is converted into its corresponding hexadecimal integer and then written between & and ;, prefixed with #x (the x means hexadecimal).

So, in general, a decimal numeric entity can be expressed as &#code; whereas a hexadecimal numeric entity can be expressed as &#xcode;, where code denotes the number representing the code point of the underlying character.

If a character doesn't have a named entity, you can always use a numeric entity to express it in HTML, given that you know its code point. Basically, you can express just about any character in HTML using a numeric entity.

Let's take the example of the < character.

< has the code point 60 in Unicode, sometimes also expressed more technically as U+003C (where 003C is the hexadecimal representation of the number 60).

60 is already a decimal number, likewise, the decimal entity for < would trivially be <. Converting 60 to hexadecimal gives us the number 3C, hence the hexadecimal entity would be < (or equivalently, <, with an uppercase C).

The code below expresses < in three different ways:

<p>Less-than symbol: &lt;</p>
<p>Less-than symbol: &#60;</p>
<p>Less-than symbol: &#x3c;</p>

Entities are amazing, aren't they?