HTML Paragraphs Tutorial

Understanding HTML Paragraphs

The HTML element represents a paragraph of text. It is one of the most commonly used HTML elements for organizing written content on a webpage.

Paragraphs separate related sentences and ideas into meaningful blocks of content. Browsers normally display each paragraph on a new line with space before or after it, while CSS can be used to control the paragraph's visual appearance and spacing.

HTML Paragraph Syntax

A paragraph begins with an opening tag and ends with a closing tag. The text belonging to the paragraph is placed between the two tags.

<p>This is a paragraph of text.</p>

The element should contain text and other phrasing content that belongs together as a paragraph.

HTML Paragraph Example

The following example uses a heading followed by two paragraphs. Each element creates a separate paragraph of content.

<h1>Learning HTML</h1>

<p>HTML provides the structure and content of a webpage.</p>

<p>Learning the basic HTML elements is the first step toward creating your own webpages.</p>

Try changing the paragraph text or adding another element in the editor to see how the browser displays each paragraph separately.

Play in Editor

Using Multiple Paragraphs

When a topic contains several separate thoughts or ideas, use individual elements rather than placing all of the text into one large block.

<p>HTML is used to structure the content of webpages.</p>

<p>CSS controls the presentation and layout of that content.</p>

<p>JavaScript can add behavior and interactivity to the page.</p>

Breaking content into meaningful paragraphs makes longer text easier to read, scan, and understand.

Paragraphs and Whitespace

Adding extra spaces or line breaks inside HTML source code does not normally create the same spacing in the browser. In regular HTML text, sequences of whitespace characters are generally collapsed into a single space.

<p>This paragraph
contains several
lines in the HTML
source code.</p>

Although the source code contains several lines, the browser normally displays the text as one flowing paragraph and wraps it according to the available width of its container.

When spacing or layout needs to be controlled visually, CSS should normally be used instead of adding repeated spaces or blank lines to the HTML source.

Paragraphs and Line Breaks

A new paragraph and a line break are not the same thing. Use a new element when the content begins a separate paragraph, and use the element when a line break is meaningful within the same block of text.

<p>First paragraph of text.</p>
<p>Second paragraph of text.</p>

<p>123 Main Street<br>
Prineville, Oregon 97754</p>

Do not use multiple elements to create space between paragraphs. Paragraph spacing should be controlled with CSS.

Styling Paragraphs with CSS

CSS can change the appearance of paragraphs without changing their meaning or structure. Common paragraph styles include text color, font size, line height, alignment, and margins.

p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

The HTML continues to identify the content as a paragraph, while CSS determines how that paragraph is presented visually.

Paragraph Best Practices

Use the element for actual paragraphs of text.
Separate different thoughts or ideas into individual paragraphs.
Keep paragraph content clear and easy to read.
Do not use empty elements to create vertical space.
Do not use repeated elements to separate paragraphs.
Use CSS margins and other spacing properties to control the space around paragraphs.
Use semantic HTML elements instead of paragraphs when the content has a more specific meaning.

Summary

The HTML element defines a paragraph and helps organize written content into meaningful blocks. Browsers automatically flow and wrap paragraph text, while CSS should be used to control its appearance and spacing.