When we are writing text into our HTML page, we need to use characters that are not necessarily readily available to us on our keyboards or that are reserved characters that have special meaning in HTML. These are called entities. In this article, we will take a look at how to use these special characters in our code and provide a reference to some of the commonly used entities.
One way to illustrate how to use symbols is by creating a code block that you want to render on the screen. One of the issues with trying to get HTML code to show up on your screen when you run it is that it wants to execute the HTML!
The < and > are reserved characters in HTML. To get around that, we can replace those characters with what we call HTML entities. Entities are essentially another name for HTML character codes. Here is how we use them in code to get the raw code block to show up on your screen:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<code>
<!--The <code> blocks don't prevent this HTML from being rendered--> <p>Famous Baseball Players</p>
<ul>
<li>Babe Ruth</li>
<li>Mickey Mantle</li>
<li>Nolan Ryan</li>
</ul>
</code>
<code> <br>
<!--Replace special characters with character references-->
<!--
=== non-breaking space (4 spaces === tab)
< === <
> === >
/ === /
-->
<p>Famous Baseball Players</p> <br>
    <ul> <br>
        <li>Babe Ruth</li> <br>
        <li>Mickey Mantle</li> <br>
        <li>Nolan Ryan</li> <br>
    </ul> <br>
</code>
</body>
</html>The <code> tags around the first code block did not stop the HTML from being processed. The second set of <code> tags – with the character codes – rendered the raw code to the screen as opposed to evaluating the HTML.
Ways to Use Character Entities
There are three possible ways to use characters in HTML: hex code, number code, and entity code/character name. All three start with an &. Here is a couple of examples:
| Symbol | Character Name | Decimal Code | Hex Code | Description |
| < | < | < | < | Less than |
| © | © | © | © | Copyright |
| & | & | & | & | Ampersand |
The codes are fairly interchangeable with the entities that came out with HTML4. Much of this is just trial and error. Don’t spend time on trying to memorize all of this information on symbols as you won’t necessarily use it all that often. W3Schools has a really great reference on all of the entities that are available to use in your text. This link starts on all of the symbols that were introduced as of HTML4. The following chapter on the same site has all of the newer symbols that are available. Some have all three different ways to write out the code, some don’t. Some are compatible with all browsers and some are not.
The bottom line is: Be aware of symbols, know that they exist, and know how to look up a code so you can use it in your project. That’s really all there is to it. Keep at it with trial and error and you’ll get it in no time!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
