p

The paragraph element represents a block of text, forming the basic building block of written content on the web.

Overview

The <p> element is used for blocks of text content. It automatically creates vertical spacing between adjacent paragraphs and uses modern CSS text-wrap features for optimal readability.

This is a paragraph of text demonstrating the default styling. Paragraphs have proper text wrapping that avoids orphaned words at the end of lines when possible. The text flows naturally and maintains readability across different viewport sizes.

A second paragraph shows the vertical rhythm between adjacent paragraphs. Consistent spacing helps readers follow the content and creates a comfortable reading experience.

When to Use

  • Body text - For regular prose and explanatory content
  • Descriptions - Product descriptions, summaries, introductions
  • Lead paragraphs - Opening text that introduces a section
  • Form help text - Explanatory text near form controls

When Not to Use

  • For single words or phrases (use <span> instead)
  • For items in a sequence (use <ul> or <ol>)
  • For code snippets (use <code> or <pre>)
  • For quoted text (use <blockquote>)

Basic Examples

Standard Paragraph

A standard paragraph contains one or more sentences that form a cohesive unit of thought. Browsers automatically add margins above and below paragraphs to separate them from other content.

Multiple Paragraphs

The first paragraph introduces a topic. It sets the context for what follows and draws the reader into the content.

Subsequent paragraphs develop the ideas further. Each paragraph should focus on a single main idea or point.

The final paragraph in a section often summarizes or transitions to the next topic.

Short Paragraphs

Short paragraphs are easier to scan.

They improve readability on screens.

Use them for key points or calls to action.

Text Emphasis

Paragraphs can contain inline elements for emphasis and semantic meaning.

Strong and Bold

Use strong to indicate importance, seriousness, or urgency.

Use bold for stylistic emphasis without semantic importance (like keywords in a summary).

Emphasis and Italic

Use em for stress emphasis - text that would be spoken differently.

Use italic for alternative voice or mood (like technical terms, foreign words, or thoughts).

Small Text

Use small for side comments, fine print, or legal disclaimers.

The price is $99.99 (plus tax and shipping).

Mark (Highlight)

Use mark to highlight text for reference purposes, like search results.

Variants: success, warning, error.

CSS Properties

p { text-wrap: pretty; } strong, b { font-weight: 600; } em, i { font-style: italic; } small { font-size: var(--font-size-sm); } mark { background: oklch(from var(--color-interactive) l c h / 0.2); padding-inline: var(--size-2xs); border-radius: var(--radius-s); }

Key Features

  • text-wrap: pretty - Optimizes line breaks to avoid orphaned words and improve typography
  • Semantic weights - strong and b use 600 weight for visual distinction
  • Mark highlighting - Uses the interactive color with transparency for highlighting

Lead Paragraph

Use the .lead class to create an introductory paragraph with larger, muted text.

Article Title

This is a lead paragraph that introduces the main content. It has larger text and muted color to distinguish it from regular body text.

This is a regular paragraph that follows. Notice how it contrasts with the lead paragraph above.

<p class="lead">Introduction text...</p>

Accessibility

Best Practices

  • Semantic structure - Use paragraphs for actual paragraph content, not for layout spacing
  • Reading level - Write at an appropriate reading level for your audience
  • Line length - Keep lines to 45-75 characters for optimal readability
  • Contrast - Ensure sufficient color contrast with the background

Screen Reader Behavior

Screen readers treat paragraphs as distinct blocks of content. Users can:

  • Navigate between paragraphs using keyboard shortcuts
  • Hear a pause between paragraphs to indicate the break
  • Get a count of paragraphs on the page

Emphasis and Screen Readers

  • <strong> and <em> are announced differently by some screen readers
  • <b> and <i> are purely visual and not announced
  • Choose the appropriate element based on whether the emphasis is meaningful or decorative