Spelchan.com Logo

From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 2.5: Special Symbols

Tags are simple enough, but the fact that they start with a < and end with a > is a bit of a problem. Namely, what do you do when you need to use a < or a > sign in your document. Anybody who has looked at my cheat sheet can see that it is choked full of both these symbols, so what is the trick to adding these symbols to a document?

In other programming languages, there are sequences of characters known as escape codes. The W3C uses something called named character references. These codes start with the & symbol, are followed by a shorthand description of the symbol such as an acronym or abbreviation, and ends with a semicolon (;). So, for the less-than symbol, we would use &lt; and for greater-than we would use &gt; solving the tag problem.

This leads to a new problem as to how to have an ampersand symbol, and that is simply to use &amp;. There are many different special symbols, with some of my favourites being in the table below.

SymbolHTMLUnicodeDescription SymbolHTMLUnicodeDescription
<&lt;60Less than  &leftarrow;8592Left arrow
>&gt;62Greater than  &rightarrow;8594Right arrow
&&amp;38Ampersand  &uparrow;8593Up arrow
©&copy;169Copyright  &downarrow;8595Down arrow
®&reg;174Registered Trademark  &clubsuit;9827Club suit
&trade;8482Trademark  &diamondsuit;9830Diamond suit
&ne;8800Not equals  &heartsuit;9829Heart suit
&infin;8734infinity &spadesuit;9824Spade suit

The codes shown are a very small subset of the named character codes. A complete list of these codes can be found at https://html.spec.whatwg.org/#named-character-references which is part of the specifications for HTML.

There are more than just the named codes. In the table you will notice that I listed a Unicode value. Unicode is the method we are currently using for encoding the value of symbols. Computers can only understand numbers (technically, it is high-low voltages used to represent the binary digits 1 and 0 but we will hold out on number systems until a later chapter). To represent symbols, computers assign each symbol to a number, with there being many ways of encoding the symbols. Unicode has become the current standard. Unicode numbers can be used in place of a named character code by using &#unicode; with Unicode being the value to us. For example, &#9829; will draw a heart suit symbol (♥).

Most of the Unicode tables that are available, do not use decimal numbers but instead use a different number system known as hexadecimal to represent the numbers. Hexadecimal is base 16 so uses the letters A through F in addition to the digits and allows for more compact numbers. We will take a closer look at hexadecimal later. It also has the advantage that it maps more directly to binary numbers, which can be important for low-level programming. You do not need to convert from hexadecimal to decimal to use these values, but can instead use &#x…; with the x indicating that you will be using a hexadecimal value instead of a decimal value for the code.


Chapter 2 Contents

2.1 HTML Basics Cheat Sheet

The cheat sheet for this chapter.

2.2 What is HTML

A brief history of HTML

2.3 Structure of a HTML Document

What makes up a HTML file

2.4 Tags and Elements

How tags are used to create HTML elements

2.5 Special Symbols

How to display things such as <, >, &, 😀

2.6 Links

Linking to other pages, other sites, and within the page

2.7 Images

Adding images and image maps to your page.

2.8 Lists

Ordered and unordered lists and nesting lists.

2.9 Tables

Tables with spanning rows and columns.

2.10 HTML Only Game Project

The game of NIM is the project for this chapter.

2.11 HTML Only Game Solution

How my solution to the NIM game was put together

Bonus article

Solving Nim.

← previous section
2.4 Tags and Elements
next section →
Table of Contents