Text Content

HTML collapses runs of whitespace, ignores newlines for layout, and uses entities for special characters like `<`, `>`, `&`.

3 min read Level 1/5 #html#text#entities

What you'll learn

Predict how whitespace renders
Use HTML entities
Use `<br>` and `<hr>` correctly

HTML doesn’t preserve whitespace the way a text editor does. A few rules sink in fast.

Whitespace Collapses

Multiple spaces, tabs, and newlines all become one space in the rendered output.

<p>Hello           world.

Same line as before.</p>

Renders as: Hello world. Same line as before. (one paragraph, single spaces).

If you genuinely need to preserve whitespace, use <pre>:

<pre>
  Hello
      world
</pre>

<pre> keeps every space and newline. Useful for code blocks and ASCII art.

`<br>` for Line Breaks

A real line break inside a paragraph:

<p>
  Roses are red,<br>
  Violets are blue.
</p>

Don’t use <br> for spacing — use CSS margin or separate elements. <br> is for hard breaks within a flow of text (poems, addresses, that sort of thing).

`<hr>` for Thematic Breaks

<p>One section.</p>
<hr>
<p>A new section.</p>

Renders as a horizontal rule. Use sparingly — usually a heading or spacing serves better.

HTML Entities

Some characters have special meaning in HTML — <, >, &, quotes. To display them literally, use entities:

Character	Entity
`<`	`<`
`>`	`>`
`&`	`&`
`"`	`"`
`'`	`'`
Non-break space	` `
©	`©`
—	`—`

<p>Use &lt;p&gt; for paragraphs.</p>
<!-- displays:   Use <p> for paragraphs. -->

Most of the time, you can just type the actual character (©, —, ', ") and the document’s UTF-8 encoding handles it. Entities are mostly needed for the four reserved characters: <, >, &, and quotes inside attributes.

Up Next

Headings — <h1> through <h6>.

Headings →