Special characters

Some characters in HTML are reserved: < starts a tag, and & starts a special code. If you write them in text as they are, the browser may misread them. For such cases there are entities — short codes that the browser replaces with the right character.

Why you cannot just write <

When the browser meets the < sign, it expects a tag to follow:

<p>If a <b and b> c, then a > c.</p>

The browser took <b and b> for the bold text tag: part of the line disappeared, and the rest became bold.

Entities for reserved signs

An entity starts with & and ends with a semicolon. Instead of < you write <, instead of & — &:

<p>If a &lt; b and b &lt; c, then a &lt; c.</p>
<p>A paragraph is marked up with the &lt;p&gt; tag.</p>
<p>Coffee &amp; pastries</p>

" is needed inside an attribute value that is itself written in double quotes: title="The "Bean" café".

The non-breaking space

  (non-breaking space) is a space where the browser never breaks the line. It goes between a number and its unit, so that "100" does not stay at the end of one line while "km" starts the next:

<style>
  p { width: 142px; padding: 4px; border: 1px solid silver; }
</style>
 
<p>The town is still 100 km away.</p>
<p>The town is still 100&nbsp;km away.</p>

In the first paragraph the number and the unit ended up on different lines, in the second they moved down together.

Typographic signs

Common signs have entities with readable names:

<p>&copy; 2026 The Bean café</p>
<p>Cappuccino &mdash; &euro;4</p>

A character by its number

Every character in the Unicode table has a number. It can be written as a decimal number after &# or as a hexadecimal one after &#x:

<p>&#169; and &#xA9; are the same sign</p>
<p>Weather: &#9728; &#9729; &#9731;</p>

Character numbers can be looked up in Unicode reference tables.

The UTF-8 encoding

If <head> contains <meta charset="utf-8"> (as in the lesson on document structure), almost any character can be typed straight into the code: ©, —, €, ✓. That is why today entities are needed mainly for < and &, and for invisible characters like   — in code it looks exactly like a regular space:

<p>© 2026 — price €4 ✓</p>

Common mistake

Indents made of a chain of  . The browser collapses regular spaces, so non-breaking ones seem a handy way to shift text. But such an indent depends on the font and breaks on a narrow screen. Indents are set in CSS:

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;An indent of six &amp;nbsp;</p>
<p style="text-indent: 2em;">An indent with the CSS text-indent property</p>

text-indent indents the first line, while padding and margin set the spacing of a block; they are covered in the CSS basics chapter.