Line Breaks

In the editor, we have added a short poem to the Physiology section. In the code, it is written on four lines, but look at the preview: the browser runs the lines together as if they were one long sentence.

That's because the browser joins any spaces, tabs and line breaks that follow one another in the code into a single space. Pressing Enter in the code doesn't start a new line on the page. This is also why indentation doesn't change how the page looks: we indent the code only to make it easier for us to read.

When we want to start a new line inside a text, we use the br element (br stands for break, as in line break):

<p>Happy Paws Cat Shelter<br>
12 Garden Street<br>
Springfield</p>

This code is displayed like this:

Happy Paws Cat Shelter
12 Garden Street
Springfield

The br element is special: it has no content and no closing tag, just the opening tag. Elements like this are called void elements. You already know one from the previous lesson: meta. We will meet others later, such as img and input.

Sometimes you will see it written with a slash, as <br />. That is an older way of writing the same thing. In this course, we write <br>.

Use br only for line breaks that belong to the content, such as in a poem or an address. Don't use it to make space between pieces of text: separate blocks of text belong in separate paragraphs, and spacing is set with CSS.