HTML

HTML Paragraphs, Line Breaks & Horizontal Rules

Learn how to structure text content in HTML using paragraph tags, line breaks, and horizontal rules with practical examples.

Text Structure in HTML

HTML provides several elements for structuring text content: the  tag for paragraphs,   for line breaks, and <hr> for horizontal rules (thematic breaks).

The Paragraph Tag

The  element represents a paragraph of text. Browsers automatically add margin above and below paragraphs.

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

Result:

This is the first paragraph.

This is the second paragraph.

Line Break

The   tag inserts a line break without starting a new paragraph. It's a self-closing (void) element.

<p>
  Line one<br>
  Line two<br>
  Line three
</p>

Best practice: Don't use   to create spacing between paragraphs. Use separate  tags and CSS margins instead. Reserve   for content where line breaks are meaningful, like addresses or poetry.

Horizontal Rule <hr>

The <hr> element creates a horizontal line representing a thematic break between content sections.

<p>Section about JavaScript.</p>
<hr>
<p>Section about Python.</p>

Styling the Horizontal Rule with CSS

/* Basic styled hr */
hr {
  border: none;
  height: 2px;
  background: #333;
  margin: 2rem 0;
}

/* Dashed line */
hr.dashed {
  border-top: 2px dashed #ccc;
  height: 0;
}

/* Gradient line */
hr.gradient {
  background: linear-gradient(to right, transparent, #333, transparent);
}

HTML Whitespace Behavior

HTML collapses multiple whitespace characters (spaces, tabs, newlines) into a single space. This means you cannot create visual spacing by adding extra spaces in your HTML source code.

<!-- These all render the same: -->
<p>Hello    World</p>
<p>Hello
World</p>
<p>Hello World</p>

<!-- Use &nbsp; for non-breaking spaces -->
<p>Hello&nbsp;&nbsp;&nbsp;World</p>

<!-- Or use <pre> to preserve whitespace -->
<pre>Whitespace    is    preserved</pre>

Last updated: 2026 • Browse all courses