<p>

The HTML <p> (paragraph) element is used to create a paragraph of text. It is a block-level element that adds a new line before and after the content, making it perfect for organizing text into readable sections.

💡 Tip: Use the <p> element to create paragraphs of text to structure your content for better readability.

Syntax

<p>A paragraph of text.</p>

When to use <p>

• For organizing text into readable sections.
• To separate text from other content.
• For creating structured and readable text content.

Basic usage

This is a simple example of using the <p> element:

<p>Welcome to Learn Web Development. We provide free tutorials and courses to help you master web development and coding skills.</p>

<p>Our courses cover everything from HTML and CSS basics to advanced JavaScript frameworks. Start learning today!</p>

Output:

Welcome to Learn Web Development. We provide free tutorials and courses to help you master web development and coding skills.

Our courses cover everything from HTML and CSS basics to advanced JavaScript frameworks. Start learning today!

Block-level element

The <p> element is a block-level element, meaning:

• Takes up the full available width.
• Starts on a new line.
• Laid out vertically.
• Left aligned to the container.
• Has margins above and below by default.
• Height is set by the content.

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>

Output:

Paragraph 1

Paragraph 2

Paragraph 3

Nesting rules

Other block-level elements (<div>, <h1> etc) should not be placed in side the <p> element, it should contain text or inline elements such as:

• <a> (links)
• <span> (inline text)
• <strong> and <em> (emphasis)

<!-- Correct -->
<p>This paragraph contains a <a href="#">link</a> and <strong>bold text</strong>.</p>

<!-- Incorrect -->
<p>
  <div>Incorrect use - div is a block-level element</div>
</p>

If a block-level element is nested inside of <p> the browser may automatically close the tag (</p>) before the block element.

Common use cases

• Breaking up long articles or blog posts into readable sections.
• About pages.
• Product descriptions.
• Educational text.
• Any text content that should be organized into paragraphs.

Accessibility and best practices

• Use <p> for for paragraphs of text rather than layout purposes.
• Structure content with heading elements (<h1>-<h6>) where applicable.
• Avoid adding empty <p> elements purely for spacing.
• Keep paragraphs readable in length.

Styling

The <p> element can be styled using CSS to control spacing and appearance:

p {
  margin: 1rem 0;
  color: #031926;
}

p:first-of-type {
  font-size: 1.6rem;
}

Conclusion

The <p> element is essential for structuring text into readable sections. Use it to group your text into paragraphs to improve the user experience and readability.