HTML Paragraphs

The Paragraph Element

The <p> element defines a paragraph of text. Browsers automatically add vertical space (margin) before and after paragraphs, creating visual separation between blocks of text. This spacing improves readability and text flow.

Multiple spaces and line breaks in your HTML source code are collapsed into a single space when rendered. This is called whitespace collapsing. To control spacing and line breaks, use CSS or HTML elements like <br>, not spaces in your source code.

Paragraphs are block-level elements, meaning they start on a new line and take up the full width available. You can nest inline elements (like <strong>, <em>, <a>) inside paragraphs, but you cannot nest block elements (like other paragraphs or headings) inside paragraphs.

<!-- Basic paragraphs -->
<p>This is a paragraph of text. It creates a block with spacing above and below.</p>

<p>This is another paragraph. Even though there are multiple
line breaks and     extra spaces in the source code,
they are collapsed into single spaces when displayed.</p>

<!-- Paragraphs with inline elements -->
<p>This paragraph contains <strong>bold text</strong>, <em>italic text</em>, and <a href="#">a link</a>.</p>

<!-- Multiple short paragraphs -->
<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Third paragraph.</p>

Line Breaks vs New Paragraphs

When you need a line break within a paragraph without creating a new paragraph, use the <br> element. This is useful for addresses, poems, or any content where line breaks are significant but you don't want the extra spacing that paragraphs provide.

The <br> element is a void element (self-closing) with no content. It simply inserts a line break at that point. Use <br> sparingly—most content should be broken into separate paragraphs rather than using multiple <br> tags.

Don't use <br> elements just to create vertical spacing. That's what CSS is for. Use margin and padding in your CSS to control spacing between elements.

<!-- Line breaks within addresses -->
<p>
  Company Name<br>
  123 Main Street<br>
  Suite 100<br>
  New York, NY 10001
</p>

<!-- Poetry with line breaks -->
<p>
  Roses are red,<br>
  Violets are blue,<br>
  HTML is great,<br>
  And CSS is too.
</p>

<!-- BAD: Don't use br for spacing -->
<p>This is wrong</p>
<br><br><br>  <!-- Don't do this -->
<p>Use CSS margin instead</p>

<!-- GOOD: Use CSS for spacing -->
<p style="margin-bottom: 3rem;">This is correct</p>
<p>CSS controls spacing</p>

Paragraph Best Practices

Keep paragraphs focused on a single idea or topic. When you move to a new idea, start a new paragraph. This makes your content easier to read and scan.

For web content, shorter paragraphs work better than long ones. Aim for 2-4 sentences per paragraph on average. Web users scan more than they read, and shorter paragraphs are easier to scan.

Don't leave empty paragraphs in your HTML. If you need spacing, use CSS. Empty paragraphs (<p></p> or <p>&nbsp;</p>) are semantically meaningless and create accessibility issues.

Styling Paragraphs with CSS

Use CSS to control paragraph appearance: font-size, line-height, color, text-align, margin, and more. Good typography makes content more readable and engaging.

Line-height is particularly important for readability. A line-height of 1.5 to 1.7 times the font-size is generally considered optimal for body text. Too tight makes text hard to read; too loose makes lines feel disconnected.

Set a comfortable line length (measure) for paragraphs. Lines that are too long (over 80-90 characters) strain readers' eyes as they track from one line to the next. Use max-width to constrain paragraph width.

<!-- HTML paragraphs -->
<p class="intro">This is an introductory paragraph with special styling.</p>
<p>This is a regular paragraph with standard styling.</p>

<!-- CSS for readable paragraphs -->
<style>
p {
  font-size: 16px;
  line-height: 1.6;  /* 1.6 times font size */
  color: #333;
  margin-bottom: 1.5rem;
  max-width: 65ch;  /* 65 characters wide */
}

.intro {
  font-size: 1.25rem;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.7;
}

/* First paragraph special styling */
article p:first-of-type {
  font-size: 1.1rem;
}

/* Drop cap for first letter */
article p:first-of-type::first-letter {
  font-size: 3rem;
  font-weight: bold;
  float: left;
  line-height: 1;
  margin-right: 0.1em;
}
</style>

The Horizontal Rule

The <hr> element represents a thematic break or transition between paragraphs or sections. Browsers typically display it as a horizontal line, but its semantic meaning is more important than its appearance.

Use <hr> to separate different topics or scenes in your content. It's particularly useful in articles, stories, or documentation where you need to indicate a shift in topic without starting a new section.

Like other presentational aspects, the appearance of <hr> should be controlled with CSS. You can style it to be a simple line, a decorative divider, or even hide it visually while maintaining its semantic purpose.

<!-- Horizontal rule separating content -->
<p>This is the end of one topic.</p>

<hr>

<p>This paragraph starts a new, related topic.</p>

<!-- Styled horizontal rules -->
<style>
hr {
  border: none;
  border-top: 2px solid #ddd;
  margin: 2rem 0;
}

.hr-fancy {
  border: none;
  height: 2px;
  background: linear-gradient(to right, transparent, #999, transparent);
  margin: 3rem auto;
  max-width: 300px;
}

.hr-text {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 2rem 0;
}

.hr-text::before,
.hr-text::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #ddd;
}

.hr-text::before {
  margin-right: 1rem;
}

.hr-text::after {
  margin-left: 1rem;
}
</style>

<p>Content before</p>
<hr class="hr-fancy">
<p>Content after</p>

<p>Another section</p>
<div class="hr-text">* * *</div>
<p>Next section</p>