- Paragraph Element

The `` Element

Block-level HTML 1.0

The  element represents a paragraph of text. It’s one of the most fundamental and commonly used HTML elements for structuring text content on web pages.

Quick Example

<p>This is a paragraph of text. It groups related sentences together.</p>

<p>This is another paragraph. Each paragraph is separated with spacing.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>This is a paragraph of text. It groups related sentences together.</p>

<p>This is another paragraph. Each paragraph is separated with spacing.</p>

Syntax

<p>Your paragraph text goes here.</p>

The  element wraps a block of text, creating a paragraph with automatic spacing before and after.

Attributes

The  element supports all global attributes like id, class, style, and lang.

<p id="intro" class="lead-text" style="color: #333;">
  Important introductory paragraph.
</p>

Common Use Cases

Basic Text Content

<h1>Welcome to Our Website</h1>

<p>We are a company dedicated to creating amazing web experiences. Our team has been building websites for over 10 years.</p>

<p>Whether you need a simple landing page or a complex web application, we have the expertise to help you succeed.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<h1>Welcome to Our Website</h1>

<p>We are a company dedicated to creating amazing web experiences. Our team has been building websites for over 10 years.</p>

<p>Whether you need a simple landing page or a complex web application, we have the expertise to help you succeed.</p>

Article Content

<article>
<h1>The Benefits of Semantic HTML</h1>

<p>Semantic HTML uses elements that clearly describe their meaning to both browsers and developers. This makes your code more readable and accessible.</p>

<p>Using proper semantic elements improves SEO, as search engines better understand your content structure. It also helps screen readers navigate your page more effectively.</p>

<p>Always choose the most appropriate HTML element for your content, rather than using generic divs and spans everywhere.</p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<h1>The Benefits of Semantic HTML</h1>

<p>Semantic HTML uses elements that clearly describe their meaning to both browsers and developers. This makes your code more readable and accessible.</p>

<p>Using proper semantic elements improves SEO, as search engines better understand your content structure. It also helps screen readers navigate your page more effectively.</p>

<p>Always choose the most appropriate HTML element for your content, rather than using generic divs and spans everywhere.</p>
</article>

With Inline Elements

<p>You can include <strong>bold text</strong>, <em>italic text</em>, and <a href="#">links</a> inside paragraphs.</p>

<p>You can also add <code>&lt;code&gt;</code> elements, <mark>highlighted text</mark>, and <abbr title="HyperText Markup Language">HTML</abbr> abbreviations.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>You can include <strong>bold text</strong>, <em>italic text</em>, and <a href="#">links</a> inside paragraphs.</p>

<p>You can also add <code>&lt;code&gt;</code> elements, <mark>highlighted text</mark>, and <abbr title="HyperText Markup Language">HTML</abbr> abbreviations.</p>

Multiple Paragraphs

<section>
<h2>About Our Services</h2>

<p>We offer a wide range of web development services tailored to your needs. From initial concept to final deployment, our team is with you every step of the way.</p>

<p>Our services include:</p>

<ul>
  <li>Custom website design and development</li>
  <li>E-commerce solutions</li>
  <li>Web application development</li>
  <li>Website maintenance and support</li>
</ul>

<p>Contact us today to learn how we can help your business grow online.</p>
</section>

Result

Interactive code playground requires JavaScript. Here's the code:

<section>
<h2>About Our Services</h2>

<p>We offer a wide range of web development services tailored to your needs. From initial concept to final deployment, our team is with you every step of the way.</p>

<p>Our services include:</p>

<ul>
  <li>Custom website design and development</li>
  <li>E-commerce solutions</li>
  <li>Web application development</li>
  <li>Website maintenance and support</li>
</ul>

<p>Contact us today to learn how we can help your business grow online.</p>
</section>

Styling Paragraphs

Basic Styling

<style>
.styled-paragraph {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #374151;
  margin-bottom: 1rem;
}
</style>

<p class="styled-paragraph">
This paragraph has custom styling applied. Notice the font size, line height, and spacing.
</p>

<p class="styled-paragraph">
Consistent paragraph styling improves readability and creates a professional appearance.
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.styled-paragraph {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #374151;
  margin-bottom: 1rem;
}
</style>

<p class="styled-paragraph">
This paragraph has custom styling applied. Notice the font size, line height, and spacing.
</p>

<p class="styled-paragraph">
Consistent paragraph styling improves readability and creates a professional appearance.
</p>

Lead Paragraphs

<style>
.lead {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.7;
  color: #4b5563;
}
</style>

<h1>Introduction to Web Development</h1>

<p class="lead">
Web development is the process of building and maintaining websites. It encompasses everything from simple static pages to complex web applications.
</p>

<p>In this guide, we'll explore the fundamental technologies that power the modern web...</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.lead {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.7;
  color: #4b5563;
}
</style>

<h1>Introduction to Web Development</h1>

<p class="lead">
Web development is the process of building and maintaining websites. It encompasses everything from simple static pages to complex web applications.
</p>

<p>In this guide, we'll explore the fundamental technologies that power the modern web...</p>

Drop Caps

<style>
.drop-cap::first-letter {
  font-size: 3.5rem;
  line-height: 1;
  float: left;
  margin-right: 0.5rem;
  color: #3b82f6;
  font-weight: bold;
}
</style>

<p class="drop-cap">
Once upon a time, in a land far away, there lived a web developer who dreamed of creating the perfect website. This developer spent countless hours learning HTML, CSS, and JavaScript.
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.drop-cap::first-letter {
  font-size: 3.5rem;
  line-height: 1;
  float: left;
  margin-right: 0.5rem;
  color: #3b82f6;
  font-weight: bold;
}
</style>

<p class="drop-cap">
Once upon a time, in a land far away, there lived a web developer who dreamed of creating the perfect website. This developer spent countless hours learning HTML, CSS, and JavaScript.
</p>

Text Alignment

<p style="text-align: left;">This paragraph is left-aligned (default).</p>

<p style="text-align: center;">This paragraph is centered.</p>

<p style="text-align: right;">This paragraph is right-aligned.</p>

<p style="text-align: justify;">This paragraph is justified. The text spreads out to fill the entire width of the container, creating straight edges on both sides.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p style="text-align: left;">This paragraph is left-aligned (default).</p>

<p style="text-align: center;">This paragraph is centered.</p>

<p style="text-align: right;">This paragraph is right-aligned.</p>

<p style="text-align: justify;">This paragraph is justified. The text spreads out to fill the entire width of the container, creating straight edges on both sides.</p>

Common Mistakes

<p style="margin-bottom: 2rem;">First paragraph with custom spacing.</p>
<p>Second paragraph.</p>

<p>First paragraph.</p>
<p></p> <!-- Don't use empty paragraphs -->
<p></p>
<p>Second paragraph.</p>

Don’t Use Paragraphs for Layout

Good
Avoid

<div class="container">
  <p>This is actual text content.</p>
</div>

<p style="display: flex;"> <!-- Don't use p for layout -->
  <span>Item 1</span>
  <span>Item 2</span>
</p>

Use Proper Nesting

Good
Invalid

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

<p>This paragraph contains
  <div>a div</div> <!-- Block elements can't go in paragraphs -->
</p>

Accessibility

Screen readers pause between paragraphs, helping users understand content structure:

<p>First thought or idea.</p>
<p>Second, separate thought or idea.</p>

Line Length for Readability

Keep line length between 50-75 characters for optimal readability:

<style>
.readable {
  max-width: 65ch; /* ch = character width */
  margin: 0 auto;
}
</style>

<p class="readable">
This paragraph has a maximum width set in character units, making it easier to read. Long lines of text can be tiring to read, while very short lines break up the reading rhythm.
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.readable {
  max-width: 65ch; /* ch = character width */
  margin: 0 auto;
}
</style>

<p class="readable">
This paragraph has a maximum width set in character units, making it easier to read. Long lines of text can be tiring to read, while very short lines break up the reading rhythm.
</p>

Line Height

Adequate line height improves readability, especially for users with dyslexia:

<style>
.good-spacing {
  line-height: 1.6; /* 1.5-1.6 is recommended */
}
</style>

<p class="good-spacing">
Proper line height makes text easier to read. The space between lines helps the eye track from the end of one line to the beginning of the next.
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.good-spacing {
  line-height: 1.6; /* 1.5-1.6 is recommended */
}
</style>

<p class="good-spacing">
Proper line height makes text easier to read. The space between lines helps the eye track from the end of one line to the beginning of the next.
</p>

SEO Considerations

Content Quality

Search engines analyze paragraph content:

<!-- Good: Descriptive, valuable content -->
<p>HTML paragraphs structure text content on web pages. Using proper paragraph elements helps both users and search engines understand your content organization.</p>

<!-- Avoid: Thin, keyword-stuffed content -->
<p>HTML paragraph. Paragraph HTML. Learn HTML paragraphs. HTML p tag.</p>

First Paragraph Importance

The first paragraph often carries extra SEO weight:

<article>
<h1>Complete Guide to HTML Paragraphs</h1>

<p>The HTML paragraph element (&lt;p&gt;) is fundamental for structuring text content on web pages. This comprehensive guide covers everything you need to know about using paragraphs effectively.</p>

<p>We'll explore syntax, styling, accessibility, and best practices...</p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<h1>Complete Guide to HTML Paragraphs</h1>

<p>The HTML paragraph element (&lt;p&gt;) is fundamental for structuring text content on web pages. This comprehensive guide covers everything you need to know about using paragraphs effectively.</p>

<p>We'll explore syntax, styling, accessibility, and best practices...</p>
</article>

Semantic Meaning

Actual Paragraphs

Use  for actual paragraphs of text:

<p>The web is built on three core technologies: HTML for structure, CSS for presentation, and JavaScript for interactivity.</p>

<p>Each technology serves a distinct purpose, but they work together to create modern web experiences.</p>

Not for Every Text Block

Good
Less Semantic

<address>
  123 Main Street<br>
  City, State 12345
</address>

<p>123 Main Street</p>
<p>City, State 12345</p>

Advanced Examples

Paragraphs with Citations

<p>According to the <cite>HTML Living Standard</cite>, the paragraph element represents a paragraph of content.</p>

<p>"The best way to learn HTML is by doing," said John Doe in his book <cite>Web Development Basics</cite>.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>According to the <cite>HTML Living Standard</cite>, the paragraph element represents a paragraph of content.</p>

<p>"The best way to learn HTML is by doing," said John Doe in his book <cite>Web Development Basics</cite>.</p>

Paragraphs with Time

<p>Published on <time datetime="2025-12-11">December 11, 2025</time></p>

<p>The event starts at <time datetime="14:00">2:00 PM</time> local time.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Published on <time datetime="2025-12-11">December 11, 2025</time></p>

<p>The event starts at <time datetime="14:00">2:00 PM</time> local time.</p>

Responsive Typography

<style>
.responsive-text {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.6;
}
</style>

<p class="responsive-text">
This paragraph uses responsive font sizing with clamp(). The text size adjusts based on viewport width, with defined minimum and maximum sizes.
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.responsive-text {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.6;
}
</style>

<p class="responsive-text">
This paragraph uses responsive font sizing with clamp(). The text size adjusts based on viewport width, with defined minimum and maximum sizes.
</p>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	3+	Full support

The  element has been supported since the earliest browsers.

Line break within a paragraph. Learn more →

Generic container for flow content. Learn more →

Extended quotation, often contains paragraphs. Learn more →

Contact information, alternative to paragraphs. Learn more →

<p> - Paragraph Element

The `<p>` Element

Quick Example

Syntax

Attributes

Common Use Cases

Basic Text Content

Article Content

With Inline Elements

Multiple Paragraphs

Styling Paragraphs

Basic Styling

Lead Paragraphs

Drop Caps

Text Alignment

Common Mistakes

Don’t Use Empty Paragraphs for Spacing

Don’t Use Paragraphs for Layout

Use Proper Nesting

Accessibility

Line Length for Readability

Line Height

SEO Considerations

Content Quality

First Paragraph Importance

Semantic Meaning

Actual Paragraphs

Not for Every Text Block

Advanced Examples

Paragraphs with Citations

Paragraphs with Time

Responsive Typography

Browser Support

Specifications

<p> - Paragraph Element

The <p> Element

Quick Example

Syntax

Attributes

Common Use Cases

Basic Text Content

Article Content

With Inline Elements

Multiple Paragraphs

Styling Paragraphs

Basic Styling

Lead Paragraphs

Drop Caps

Text Alignment

Common Mistakes

Don’t Use Empty Paragraphs for Spacing

Don’t Use Paragraphs for Layout

Use Proper Nesting

Accessibility

Screen Reader Behavior

Line Length for Readability

Line Height

SEO Considerations

Content Quality

First Paragraph Importance

Semantic Meaning

Actual Paragraphs

Not for Every Text Block

Advanced Examples

Paragraphs with Citations

Paragraphs with Time

Responsive Typography

Browser Support

Related Elements

Specifications

The `<p>` Element