HTML Paragraphs

The HTML <p> element defines a paragraph. A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

HTML Paragraphs

A paragraph is defined with the <p> tag:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

💡 Note: Browsers automatically add a single blank line before and after each <p> element.

HTML Display

When you write HTML, you cannot be sure how it will look on different screen sizes. The page may look big on a wide screen and small on a narrow screen.

💡 Note: The browser will remove extra spaces and extra lines when the page is displayed. One or more blank lines in the HTML source (created by pressing the Enter key) are treated as one blank space.

HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal line.

<p>This is a paragraph.</p>
<hr>
<p>This is another paragraph.</p>

HTML Line Breaks

If you want a line break (a new line) without starting a new paragraph, use the <br> tag.

The <br> element is a line break (a break in the line). The <br> tag is useful for writing addresses or poems:

<p>You can<br>force a line<br>break with the br tag.</p>

The poem Problem

In the HTML example below, the poem doesn't display the way you intended. Each line starts on a new line. If you want to display it the way it was written, you must add more <br> tags:

The pre Element

For poems, code, or any text where formatting matters, use the <pre> element. The <pre> element preserves the text inside it — spaces, line breaks, and all formatting are shown exactly as written:

<pre>
  My Bonnie lies over the ocean.
  My Bonnie lies over the sea.
  My Bonnie lies over the ocean.
  Oh, bring back my Bonnie to me.
</pre>

Next: HTML Text Formatting