Markup CityISSUE #34 of 39

entities · & · < ·  

Tagg the BuilderVSThe Unclosed Tag

Tagg the Builder saysCharacter entities let you display reserved characters like < > & by writing their codes instead of the symbols.

Some characters mean something to HTML. A literal < would start a tag; & starts an entity. To show them as plain text you write entities: < for <, > for >, & for &, " for ".

There's also   — a non-breaking space that won't collapse or let text wrap. Entities come in named (©) and numeric (©) forms; the numeric code always works when you can't remember a name.

Power-ups you unlock

< > & " show reserved characters as text
  is a non-breaking space (no wrap, no collapse)
Named (©) and numeric (©) forms both work
Escape & as & even inside URLs

The Unclosed Tag attacks — common mistakes

Typing a raw < in text and starting an accidental tag
Forgetting to escape & in query strings as &
Sprinkling   for layout spacing instead of using CSS

Boss battleMake the page literally display the text <p>hi</p> as characters (not a rendered paragraph) using entities.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace">
  <p>show a tag as text: &amp;lt;p&amp;gt;hi&amp;lt;/p&amp;gt; →  &lt;p&gt;hi&lt;/p&gt;</p>
  <p>ampersand: Salt &amp;amp; Pepper → Salt &amp; Pepper</p>
  <p>copyright: &amp;copy; → &copy;</p>
</body></html>

▶ Open the interactive comic issue

‹ Style Guide · Keeping Markup Clean Symbols · Math · Currency · Arrows ›

entities · &amp; · &lt; · &nbsp;

Power-ups you unlock

The Unclosed Tag attacks — common mistakes

Example code

entities · & · < ·