Module 2: Paragraphs0 Level Beginner

5. Paragraphs, Line Breaks and Dividers (, , <hr>)

Spacing between text, starting a new line and drawing a dividing line

Real-life analogy

In a newspaper, the stories are divided into paragraphs, the break between lines within a paragraph is , and the black dividing line between two stories is <hr>.

Explanation

The 3 basic tags for arranging text into paragraphs:

: For writing a normal paragraph. The browser automatically leaves a little empty space (margin) above and below it.
 : Line Break. Used when you want to move to the next line without starting a new paragraph (as in a poem or an address). It is an Empty Tag that has no closing tag.
<hr>: Horizontal Rule. Draws a horizontal line (a dividing line) on the page. This is also an Empty Tag.

Golden rules

Don't use   10 times to change lines in a paragraph; use CSS margin to increase the distance.
  and <hr> do not need to be closed.

Common mistake

Pressing the spacebar 10 times in HTML to get 10 spaces. The browser collapses those 10 spaces into just 1 space.

Example code

<!DOCTYPE html>
<html>
<body style="font-family: sans-serif; padding: 15px;">
  <p>This is the first paragraph.<br>This is the second line of the same paragraph (via &lt;br&gt;).</p>
  <hr style="border: 0; border-top: 2px dashed #94a3b8; margin: 15px 0;">
  <p>This is the second, independent paragraph that begins after the horizontal rule (&lt;hr&gt;).</p>
</body>
</html>

Run & edit this in the live editor

Quick quiz

Which tag is used in HTML to draw a horizontal divider line?

<line>
<divider>
<hr>

Show answer

Answer: <hr>

<hr> stands for Horizontal Rule, which draws a dividing line on the page.

5. Paragraphs, Line Breaks and Dividers (<p>, <br>, <hr>)