DEV Community

Cover image for HTML Entities
Karl Esi
Karl Esi

Posted on

HTML Entities

#html #webdev #beginners #programming

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.

<!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>
Enter fullscreen mode Exit fullscreen mode

Autocompleting the HTML tag in VS Code

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

<!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>
Enter fullscreen mode Exit fullscreen mode

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

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

<!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>
Enter fullscreen mode Exit fullscreen mode

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

<!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>
Enter fullscreen mode Exit fullscreen mode

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.

<p>I love to teach you &lt;HTML&gt;!</p>
Enter fullscreen mode Exit fullscreen mode

This is the code on VS Code:

<!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>
Enter fullscreen mode Exit fullscreen mode

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

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

<p>I love to teach you &lt;HTML&gt;! &copy;</p>
Enter fullscreen mode Exit fullscreen mode

This is the code on VS Code:

<!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>
Enter fullscreen mode Exit fullscreen mode

The &copy; entity

Now take a look.

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

Here's what I found:

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

Now, this is all about HTML entities.

Happy Coding!

Top comments (0)

Read next

waveplay-staff profile image

Getting credentials for your Discord Activity

WavePlay Staff -

suneeh profile image

🔍 Searching the web

Suneeh -

ootkin profile image

From Code to OpenAPI spec with Ease using SkimX

ootkin -

sainsec profile image

Cross-Site Request Forgery (CSRF)

Hussain -