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.

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>)

Lead Paragraph

Use the .lead class to create an introductory paragraph with larger, muted text. Commonly used as the opening paragraph of an article or section.

Balanced Text

The .balance class applies text-wrap: balance, which distributes text evenly across lines. Ideal for short, centered text like hero subtitles or card descriptions.

Note: Browsers limit text-wrap: balance to roughly 6 lines of text. For longer paragraphs, the default text-wrap: pretty is more appropriate.

Indented Paragraphs

The .indent class adds a book-style first-line indent. When consecutive indented paragraphs follow each other, the inter-paragraph margin collapses to zero, creating traditional prose formatting.

Justified Text

The .justify class aligns text to both edges and enables automatic hyphenation. This produces the polished look seen in books and newspapers. Works best in narrow columns (40-60ch).

Accessibility note: The a11y-dyslexia theme automatically overrides p.justify to left-aligned text with no hyphenation, ensuring readability for users with dyslexia.

Text Emphasis

Paragraphs can contain inline elements for emphasis and semantic meaning.

Choosing the Right Element

Element Meaning Screen Reader
<strong> Importance, seriousness, urgency Announced differently
<b> Stylistic bold (keywords, product names) Not announced
<em> Stress emphasis (spoken differently) Announced differently
<i> Alternative voice (terms, thoughts) Not announced
<small> Side comments, fine print Normal reading
<mark> Highlighted for reference Some readers announce

CSS Properties

Variant Summary

Class Purpose
p.lead Larger, muted intro paragraph
p.balance Even line distribution for short, centered text
p.indent Book-style first-line indent with collapsed margins
p.justify Justified alignment with auto-hyphenation

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 and hear a pause between them to indicate the break.

Dyslexia Theme

The a11y-dyslexia theme overrides p.justify to use left-aligned text and disables hyphenation. The .lead, .balance, and .indent classes remain unaffected since they don't interfere with readability.
↑