HTML Paragraphs

HTML Paragraphs are defined using the <p> tag. Paragraphs are the most basic unit of text organization on web pages.

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

How Browsers Handle Paragraphs

Browsers automatically add some white space (margin) before and after paragraphs. This visually separates paragraphs, improving text readability.

You cannot change the display of paragraphs by adding extra spaces or line breaks in the HTML source code. Browsers automatically remove extra spaces and line breaks from the source code. All consecutive whitespace characters (spaces, line breaks, tabs) are merged into a single space when displayed.

Example:

The following HTML code will look exactly the same in the browser as the example above:

<p>
    This is a paragraph.
    No matter how many line breaks I write in the source code,
    the browser will merge them.
</p>

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

Horizontal Rule <hr>

The <hr> tag (Horizontal Rule) is used to create a horizontal line on an HTML page. It is typically used to indicate a change in topic or to separate content.

<hr> is an empty element; it has no closing tag.

<h1>HTML</h1>
<p>HTML is the standard markup language for building web pages.</p>

<hr>

<h1>CSS</h1>
<p>CSS is used to style web pages.</p>

Visually, it will appear as a horizontal line spanning its container.

Line Break <br>

The <br> tag (Line Break) is used to insert a forced line break.

If you want to force a new line within a paragraph or elsewhere, without starting a new paragraph, you can use <br>.

<br> is also an empty element.

<p>This poem<br>is split<br>into several lines.</p>

Note: The <p> tag is used to define a semantic "paragraph," while <br> is just a visual "line break." Don't abuse <br> to increase spacing between paragraphs; this need should be addressed using CSS's margin property.

The <pre> Tag and Preformatted Text

If you want to preserve all whitespace in text (including spaces, indentation, and line breaks), you can use the <pre> tag.

Text inside a <pre> element is displayed in a monospace font and retains its original formatting.

<pre>
  Spring Morning
    by Meng Haoran
  In spring I sleep and do not notice dawn,
  Everywhere I hear birds singing.
</pre>

This is very useful for displaying code examples or ASCII art that requires precise format control.