HTML Entities
Tags: html, webdev, beginners, programming
Published: 2023-10-06 06:30:32

Some characters are reserved in HTML, and to display them we have to use a special notation. For example, let's say we want to wrap the word HTML with angle brackets. Let's see what is going to happen.

So, I type left angle and right angle bracket, VS Code thought we were adding an HTML element, so it automatically generated the closing tag. 

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <p>I love to teach you <HTML>!</HTML></p>
    </body>
</html>
```

![Autocompleting the HTML tag in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dnhsxasr8phw9flx33iy.png 'Autocompleting the HTML tag in VS Code')

We don't want this, so let's delete it.

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <p>I love to teach you<HTML>!</p>
    </body>
</html>
```

![Removed the last HTML tag in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iri03hcuodo9b1vcmrrf.png 'Removed the last HTML tag in VS Code')

Now, back in the browser, look. Where is our HTML word?

![The word HTML is not visible in the browser page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zqmjt6krw0zfz7cnxnps.png 'The word HTML is not visible in the browser page')

It is not here because the browser interpreted this as an HTML tag.

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <p>I love to teach you<HTML>!</p>
    </body>
</html>
```

![The HTML opening tag that was never displayed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sihirnb70ekyyzchrcp8.png 'The HTML opening tag that was never displayed')

This is not what we want. We want to display this exactly as this. So, to solve this problem, we are going to use HTML entities. All these entities start with an ampersand and end with a semicolon `&;`

For the Full Free Handbook: [HTML and CSS Handbook for Beginners](https://karlgusta.substack.com/p/html-and-css-handbook-for-beginners)

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <p>I love to teach you &; <HTML>!</p>
    </body>
</html>
```

![HTML entity &; in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8n4n2g182utjz6qc571.png 'HTML entity &; in VS Code')

So, we have an entity for displaying a less than sign, that is `&lt;` short for less than. Similar, we have another HTML entity for displaying the greater than sign. So, we type `&gt;` which is short for greater than, followed by a semicolon.

```html
<p>I love to teach you &lt;HTML&gt;!</p>
```

This is the code on VS Code:

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <p>I love to teach you &lt;HTML&gt;!</p>
    </body>
</html>
```

![The less than and greater than sign in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ys1wu3qy8ofca0ap6dvt.png 'The less than and greater than sign in VS Code')

Now, back to the browser, that is exactly what we wanted.

![HTML word surrounded by the less than and greater than signs in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b861ctqdw34eizui417s.png 'HTML word surrounded by the less than and greater than signs in VS Code')

Another common HTML entity is the copyright symbol. So, at the end, I am going to type `&copy;`

```html
<p>I love to teach you &lt;HTML&gt;! &copy;</p>
```

This is the code on VS Code:

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <p>I love to teach you &lt;HTML&gt;! &copy;</p>
    </body>
</html>
```

![The &copy; entity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fn8nd2qxsse990jbtcgy.png 'The &copy; entity')

Now take a look.

![The copy sign shown in the browser page after the exclamation mark](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40lsqukqezog6l8sh55p.png 'The copy sign shown in the browser page after the exclamation mark')

There is our copyright symbol. It looks nice.

Now, we have so many entities in HTML and quite frankly, you don't have to memorize them. In fact, you are probably not going to use 99% of them. But in case you are curious, let me show you the complete list.

So, on Google, search for HTML entities.

![Google search for HTML entities](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gg9x6bt9ifxmu221lfca.png 'Google search for HTML entities')

Here's what I found:

![First result of HTML Entities from Google](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hai5ls7nljdfwguud0gu.png 'First result of HTML Entities from Google')

These are some of the entities. I have only used a couple of them.

![Some useful HTML Character Entities from w3schools after the Google search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4khuaur2j2kaqf95ogd.png 'Some useful HTML Character Entities from w3schools after the Google search')

Now, this is all about HTML entities.

Happy Coding!