Whitespace and Special Characters
Prerequisites: Formatting text
Whitespace collapses
Browsers treat any run of spaces, tabs, and line breaks in text as a single space:
<p>Lots of spaces
and
blank lines.</p>
This displays as "Lots of spaces and blank lines." on one line. Use pre
when whitespace matters, and CSS for spacing and alignment.
Character references
Some characters have special meaning in HTML. To show them as text, write a character reference (often called an entity):
| Character | Reference | Why |
|---|---|---|
< |
< |
Would start a tag |
> |
> |
For symmetry with < |
& |
& |
Would start a reference |
" |
" |
Inside a double-quoted attribute |
| non-breaking space | |
Keeps two words on the same line |
© |
© |
Easy to type |
<p>In HTML, write <p> to start a paragraph.</p>
<p>Tom & Jerry</p>
<p>Price: 10 kg</p>
<p>© 2026 Corner Bakery</p>
<p>Numeric references work too: € and € are both €.</p>
The browser shows: "In HTML, write <p> to start a paragraph.", "Tom & Jerry", "Price: 10 kg" (never split across lines), "© 2026 Corner Bakery", and two euro signs.
Just type the character
Because your page is UTF-8, you can type é, €, —, →, or emoji
directly. You only need references for < and & in text (and the
quote character inside attribute values). Use our
HTML Encoder/Decoder to convert text
containing these characters.
Common mistakes
- Showing code examples without escaping
<— the browser treats them as real tags and they vanish or break the page. - Using
for indentation or layout. Use CSS.
Practice
Write a paragraph that displays exactly: if (a < b && c > d) inside a
code element.
Show solution
<p><code>if (a < b && c > d)</code></p>