HTML Paragraphs, Line Breaks and Horizontal Rules

Most of the text on a web page lives in paragraphs. HTML also has elements for line breaks within a paragraph and for a change of topic between paragraphs.

The p element#

Wrap each paragraph in <p> and </p>:

<p>HTML describes the structure of a web page. Each block of text is
usually a paragraph.</p>

<p>Browsers add space above and below every paragraph, so you do not
need empty lines or extra tags to separate them.</p>

The browser wraps the text to fit the width of the window and adds a margin between paragraphs. The line breaks in the source code make no difference, as you saw in Whitespace and Line Breaks.

Line breaks with br#

<br> starts a new line inside the same paragraph. Use it when the line break is part of the content, such as addresses, poems or song lyrics:

<p>
  Ravi Kumar<br>
  Flat 4B, Green Residency<br>
  Bengaluru 560001
</p>

p or br?#

The hr element#

<hr> marks a thematic break: a change of topic or scene between paragraphs. Browsers draw it as a horizontal line:

<p>That was the end of the first day of the trip.</p>
<hr>
<p>On day two, we took the early train to the mountains.</p>

Because <hr> has a meaning (a break in the content), do not use it purely as decoration. For a decorative line, use a CSS border instead.

What can go inside a paragraph#

A paragraph can contain text and inline elements such as <a>, <strong>, <em>, <img> and <br>. It cannot contain block elements such as headings, lists, tables or other paragraphs.

<!-- Wrong: a list inside a paragraph -->
<p>Shopping list:
  <ul><li>Milk</li></ul>
</p>

The browser closes the paragraph automatically when it reaches the <ul>, so your page ends up with an empty extra paragraph and the styles you apply to p will not affect the list. Close the paragraph first, then start the list.

Common mistakes#

Practice#

<p>I wake up at six and drink a glass of warm water.</p>
<hr>
<p>After breakfast, I walk to the bus stop.</p>
<p>
  Laviyx Learn<br>
  21 Lake View Road<br>
  Chennai 600001
</p>

Key takeaway#