# Paragraphs, Line Breaks and Special Characters

Paragraphs hold a page's words, the browser squeezes extra spaces and line breaks into one space, and character references let you show characters that HTML would otherwise misread.

Novice · HTML · Updated October 31, 2026

## After this lesson you can

- Predict how the browser shows spaces and line breaks, and choose p, br or hr for each piece of text
- Write character references for characters HTML would misread, such as the less-than sign and the ampersand

## Key takeaways

- Put each paragraph in its own p element. The browser adds the space between paragraphs for you.
- The browser shows any run of spaces, tabs and line breaks in your text as a single space.
- Use br for a line break that belongs to the words, such as in a song lyric or an address, and hr for a change of topic.
- Write the less-than sign and the ampersand as character references, because HTML reads them as the start of a tag or a reference. Writing > for the greater-than sign keeps the pair matching.
- When the page is saved as UTF-8, you can type characters such as é, © and emoji straight into it.

You copy The Neon Lanterns' band bio out of a document, with its neat line breaks and an extra blank line between parts, and paste it into your page. The browser shows it as one long block of text. Then you type a song title with an `&` in it and part of the title turns into a strange symbol. Both surprises come from the same place: the browser reads your text by HTML's rules, not by how it looks in your editor. You'll use what this lesson teaches on every page that has words on it, which is every page.

## Paragraphs

A letter splits its words into paragraphs, each about one thing. A web page does too, with the **paragraph element**, `<p>` (read "p", for paragraph). Each paragraph goes in its own `<p>`, and the browser puts a gap between them:

```html
<p>The Neon Lanterns are a four-piece indie band from Portland, Oregon.</p>
<p>Their second album, Static Hearts, came out in 2025.</p>
```

## The browser squeezes whitespace

**Whitespace** is the characters you can't see: spaces, tabs and line breaks. In the text of a page, the browser shows any run of whitespace as a single space. So this lyric, typed on four lines with extra spaces:

```html
<p>
    Paper moon,      hang low,
    light the road
    and let me go.
</p>
```

shows as one line:

```text
Paper moon, hang low, light the road and let me go.
```

That rule is why you can indent your HTML and break long lines however you like: none of it shows on the page. It also means pressing Enter in your editor never makes a new line on the page.

## Line breaks and topic breaks: br and hr

Some text needs its line breaks: a poem, song lyrics, a mailing address. For those, `<br>` (read "b-r", for break) ends the line. It's a void element, with no closing tag (see *Elements and Tags*):

```html
<p>
    Paper moon, hang low,<br>
    light the road<br>
    and let me go.
</p>
<hr>
<p>The band's mailing address:<br>PO Box 2025<br>Portland, OR 97201</p>
```

`<hr>` (read "h-r", for horizontal rule) is a change of topic, like the row of stars between two scenes in a novel. Browsers draw it as a line across the page. Here it separates the lyric from the address.

Use `<br>` only for breaks that belong to the words. A new thought is a new `<p>`, and a row of `<br><br><br>` to push things down the page is a job for CSS, the language for how a page looks. The same goes for `<hr>`: use it for a change of topic, not as decoration.

## Characters HTML would misread

HTML uses a few characters as signals. A `<` starts a tag. So if your page says `Use <br> for a line break`, the browser makes a line break, and the letters br vanish:

```text
Use
for a line break.
```

To show the character itself, you write a **character reference**: a code that starts with `&` and ends with `;`. The most common are **named character references**, which use a short name:

```html
<p>Use &lt;br&gt; for a line break.</p>
<p>Rock &amp; Roll Hall of Fame</p>
<p>&copy; 2026 The Neon Lanterns</p>
```

```text
Use <br> for a line break.
Rock & Roll Hall of Fame
© 2026 The Neon Lanterns
```

`&lt;` is the less-than sign (lt), `&gt;` the greater-than sign (gt), and `&amp;` the ampersand itself, read "ampersand amp". `&copy;` is ©. A character can also be given by its number, such as `&#169;` for ©, but the names are the ones most people remember.

Why does `&` need one? The browser reads `&` followed by letters as the start of a reference. A lone `&` with a space after it usually shows fine, but `Lyrics &notes` shows as *Lyrics ¬es*, because `&not` is the name of the ¬ sign. Writing `&amp;` every time is always right.

## Typing é, © and emoji directly

Every page skeleton has `<meta charset="utf-8">` (see *The Page Skeleton*). **UTF-8** is the way the file stores its characters, and it covers every language's letters and every emoji. VS Code saves files in UTF-8 unless you tell it otherwise; the bottom bar shows it. So you can type characters like these straight into a page:

```html
<p>Café show tonight! 🎸 Doors at 7. © 2026 The Neon Lanterns</p>
```

`&copy;` and a typed © both work. Only `<` and `&` must be written as references in your text; `&gt;` is optional.

**Try it.** In your `neon-lanterns` folder, add a paragraph with the band's mailing address on three lines, first without `<br>`, then with it, and compare them in the browser. Then add a paragraph that says `Use <hr> for a change of topic`, and fix it with character references so the words show.

## Check yourself

2 questions to try on the lesson page.

## So what

The browser reads your text by HTML's rules: whitespace squeezes to one space, and `<` and `&` are signals. Once you know the rules, the page shows exactly the words you meant.

## Key terms

- [&lt;p>](https://www.ask-codey.com/glossary/p)
- [&lt;br>](https://www.ask-codey.com/glossary/br)
- [&lt;hr>](https://www.ask-codey.com/glossary/hr)
- [Whitespace](https://www.ask-codey.com/glossary/whitespace-software-development)
- [Character reference](https://www.ask-codey.com/glossary/character-reference)
- [Named character reference](https://www.ask-codey.com/glossary/named-character-reference)

## Cheat sheets

- [Paragraphs, Line Breaks and Special Characters](https://www.ask-codey.com/cheat-sheets/html-paragraphs-and-special-characters-cheat-sheet)

## Related

- [Headings and the Page Outline](https://www.ask-codey.com/lessons/html-headings-and-the-page-outline)
- [Bold, Italic and What They Mean](https://www.ask-codey.com/lessons/html-emphasis-and-importance)

Source: https://www.ask-codey.com/lessons/html-paragraphs-and-special-characters