HTML Entities

Mission

The walking-club route notes need to show a trail rule, a copyright line, and “Maps & Snacks” exactly as written. Some of those characters mean something special to HTML, so use entities to make the browser display the intended text. Your preview should show the symbols, not broken markup.

What you'll build

A route notes snippet that displays comparison operators, a copyright symbol, an ampersand, and a non-breaking distance label — all as visible text using HTML entities.

The starter supplies the document and heading; add four short route notes below it.

Escape characters that HTML reads as markup

An entity starts with & and ends with ;. Use it when you need a reserved character to appear as text.

<p>5 &lt; 10</p>    <!-- displays: 5 < 10 -->
<p>10 &gt; 5</p>    <!-- displays: 10 > 5 -->
<p>Maps &amp; Snacks</p>

Without < and >, the browser could mistake your comparison for a tag. & displays a literal ampersand.

Keep small units together

  is a non-breaking space: it keeps the words on either side on the same line. Use it for a unit such as a distance, not to create page layout spacing.

<p>Meet at the 3&nbsp;km marker.</p>

A compact symbol kit

You can also use numeric forms such as < or < for <, but named entities are often easier to read.

Checkpoint

Run the page. You should see the comparison signs, copyright symbol, and ampersand as ordinary text. If a line disappears or becomes a tag, inspect each entity for its opening & and closing ;.

Payoff

The route notes can now show their symbols and short phrases exactly as visitors should read them.