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>
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>
Now, back in the browser, look. Where is our HTML word?
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>
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>
So, we have an entity for displaying a less than sign, that is <
short for less than. Similar, we have another HTML entity for displaying the greater than sign. So, we type >
which is short for greater than, followed by a semicolon.
<p>I love to teach you <HTML>!</p>
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 <HTML>!</p>
</body>
</html>
Now, back to the browser, that is exactly what we wanted.
Another common HTML entity is the copyright symbol. So, at the end, I am going to type ©
<p>I love to teach you <HTML>! ©</p>
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 <HTML>! ©</p>
</body>
</html>
Now take a look.
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.
Here's what I found:
These are some of the entities. I have only used a couple of them.
Now, this is all about HTML entities.
Happy Coding!