Lesson 14: Entities

Overview

In this HTML lesson, we show the many types of HTML entities that can be used. First, we recall that we introduced the non-breaking space as a way to insert spaces of various lengths into text. Next, we show some basic mathematics related entities that can be used in common formulas. Then we present some entities can be used as alternatives to the superscript element. After that, we note that entities exist for most any language in the world. Furthermore, we have entities for various types of games and all of the common alpha-numeric keys on the keyboard.

The Non-breaking Space Entity

We were introduced to our first entity in the last lesson, and that was the non-breaking space. The non-breaking space can be used to make spaces of various sizes within any text element. Here, we show several lines of text with each one indented by an extra non-breaking space.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>
But the righteous man, though he die early, will be at rest.<br />
&nbsp;For old age is not honored for length of time,<br />
&nbsp;&nbsp;nor measured by number of years;<br />
&nbsp;&nbsp;&nbsp;but understanding is gray hair for men,<br />
&nbsp;&nbsp;&nbsp;&nbsp;and a blameless life is ripe old age.<br />
    </p>
  </body>
</html>

Output

Common Math Entities

Entities exist for common mathematics usage. In this example, we use the entities for the Greek letter theta, the fraction one-half, the multiplication symbol, and the division symbol.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>sin(&theta;) = &frac12;</p>
    <p>3 &times; 4 = 24 &divide; 2</p>
  </body>
</html>

Output

Element Alternatives

Entities can be used as alternatives to some elements. Here, we show two ways to encoded an exponent: with an entity or with an element. We also use the entity for the Greek letter pi.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <h1>The Area of a Circle</h1>
    <p>A = &pi;r&sup2;</p>
    <p>A = &pi;r<sup>2</sup></p>
  </body>
</html>

Output

Language Entities

Entities can be used to encode the alphabets of most any language in the world. In this example, we have encoded a couple of characters from German.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <h1>Language Entities</h1>
    <p>Ich hei&szlig;e Johann Wolfgang von G&ouml;the.</p>
  </body>
</html>

Output

Three Entity Encodings

Entities are available for many common classic games: chess, checkers, dominos, etc. In this example, we encode the four playing card suits in three different ways. All entites have a numeric specifications, which we can give in decimal or hexadecimal, as shown. For the more common entities, we also have a name specification.

Example5.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <h1>Card Suits</h1>
    <hr />
    <h1>Names: &spades; &clubs; &hearts; &diams;</h1>
    <h1>Decimal: &#9824; &#9827; &#9829; &#9830;</h1>
    <h1>Hexadecimal: &#x2660; &#x2663; &#x2665; &#x2666;</h1>
    <hr />
    <h1>Cards: &#x1F0A1; &#x1F0A5; &#x1F0AA;</h1>
  </body>
</html>

Output

Common Character Entities

Entities exist for almost any symbol in mathemtics or music. Additionally, we have entities for common characters. These are especially useful for encoding characters that might be mistaken for HTML, like the less than and greater than symbols. In this example, we encode the code for the zero entity and the quotation element for demonstration.

Example6.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <h1>Music: &#x1D11E; &#x1D15F; &#x1D13D; &#x1D130;</h1>
    <h1>Mathematics: &#x2124; &#x2220; &#x222B; &#x2200; &#x2208;</h1>
    <h1>Ordinary Text: &#x26; &#x23; &#x78; &#x33; &#x30; &#x3E; &#x3B;</h1>
    <h1>The entity code for &#x30; is &#x26;&#x23;&#x78;&#x33;&#x30;&#x3B;</h1>
    <h1><q>Hello</q> is coded like this: &lt;q&gt;Hello&lt;&sol;q&gt;</h1>
  </body>
</html>