Some characters are reserved exclusively for use in HTML markup. Meaning that browsers will always read certain characters you type as part of HTML code, whether you intend them to be or not.

One example would be the angled brackets that we use to create our HTML tags. When we use the less-than (<) angled bracket, the browser will immediately interpret any text that follows, as the name of some HTML element’s opening tag.

So how do we solve this problem? Well, with HTML Entities which allow us to display these reserved characters with mnemonic aliases that we can use instead. When the browser reads these aliases, it replaces them with the character that the alias represents.

So we can use HTML Entities to display symbols or characters that the browser would interpret as being intended for markup, or even characters that not present on a standard keyboard.

SECTIONS

• HTML entity syntax
• Use of entities on MDN
• Frequently used HTML character entities
• Summary
• Further resources
• GitHub repo used in the video

HTML ENTITY SYNTAX

Let’s say you were going to build a website like this one, to teach web development to new developers. On this website, you might need to display examples of the syntax used to create HTML elements. Like this:

Doing this requires us to attempt to display the less-than (<) and greater than (>) angled brackets on the page to the user. But as we know, when the browser sees our angled brackets, it reads them as being intended as HTML markup, and so doesn't display those angled brackets to the user.

So the example above of displaying a simple paragraph would not be possible without entities.

We might also want to use characters that are not present on the keyboard. Characters like the copyright symbol ©.

So to display these characters as text, we can replace these reserved characters that confuse the browser with a corresponding HTML Entity.

The syntax for writing an entity is in three distinct parts. They follow this pattern:

• An ampersand (&)
• A number (preceded by a hash symbol) or keyword
• A semicolon (;)

For example, to display the copyright symbol ©, we would enter &#169; or &copy;

Numeric character references have stronger browser support, and can be used to specify any Unicode character, whereas entities are limited to a subset of this.

Entities created with keywords are case-sensitive.

We have compiled an HTML Entity Reference which shows all of the available entities that can be used in HTML.

USE OF ENTITIES ON MDN

So if we go to MDN and click on to the page on HTML tables, we see that all over the page they are showing examples of HTML code.

To display this code on the page as MDN use something HTML entities to angled brackets, and other characters used in the syntax of CSS & JavaScript.

To display opening and closing <tr> and <td> tags we just need the entity name or number for angled brackets.

We already see from the image above that the alias for the less-than angled bracket is &lt;. If we also wanted to add the greater-than angled bracket, it is &gt;

If we add a 'td' between those and you have your opening table row or table data tags. Repeat this but with a '/' forward slash before the 'tr' or 'td' for your closing tags.

About halfway down the MDN page for HTML Tables they have an example of a table and an example of the code you would write to display that table.

I have created the same table in the CodePen below, and have also rewritten the code needed to display the table's HTML in the browser. You can see that it takes a bit of work to get code needed for the table to display in the browser, including extensive use of HTML entities to display the angled brackets needed to create the opening and closing HTML tags.

Entities aren’t just for markup though. We can use them to add characters not readily accessible on a standard keyboard. These include items you such as the copyright logo, which we mentioned above, characters from other langiuages, currency symbols and many others.

If you want to see them all then go to visit our HTML Entity Reference. There is an enormous amount for all kinds of characters and symbols. Here is a table with a small selection below:

FREQUENTLY USED HTML CHARACTER ENTITIES

SUMMARY

Ok so that’s it for this section, just a quick introduction to HTML Entities. It struck me that we were using code examples on this page, as well as looking at pages like MDN which display examples of code for us to learn from, and if any of you in future wanted to build something which displays code examples, like this website, and you didn’t want to have to use images, then this would probably be useful knowledge to have.

Remember to check out our HTML Entity Reference. MDN also have a great HTML Entity reference, and so do Toptal.

FURTHER RESOURCES

• HTML Entity Reference
• W3Schools: HTML Entities
• MDN: HTML Entities
• W3C: HTML Entities Character Reference
• Complete list of HTML entities with their numbers and names

GITHUB REPO USED IN THE VIDEO

• GitHub repo