<p>

Definition and Usage

The <p> element establishes a paragraph.

Browsers automatically add a single blank line before and after each <p> element.

Attributes

The <p> tag supports the Global Attributes in HTML.

The <p> tag also supports the Event Attributes in HTML.

Examples

Basic Paragraph

Create a simple paragraph:

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

Multiple Paragraphs

Use multiple paragraph elements for better readability:

<p>This is the first paragraph. It contains some introductory text.</p>

<p>This is the second paragraph. It provides additional information.</p>

<p>This is the third paragraph. It concludes the content.</p>

Paragraph with Inline Elements

Include inline formatting elements within paragraphs:

<p
  >
  This paragraph contains <strong>bold text</strong>,
  <em>italic text</em>, and a
  <a
    href="https://example.com"
    >hyperlink</a
  >.
</p
>

Styled Paragraphs with CSS

Apply custom styling to paragraphs:

<style>
  .intro {
    font-size: 20px;
    color: #745af2;
    font-weight: 600;
    line-height: 1.6;
  }

  .highlight {
    background-color: #fffbcc;
    padding: 15px;
    border-left: 4px solid #745af2;
    margin: 20px 0;
  }
</style>

<p class="intro">This is an introductory paragraph with custom styling.</p>

<p class="highlight">This paragraph is highlighted with a colored background.</p>

Paragraph Spacing Control

Control spacing between paragraphs using CSS:

<style>
  .tight-spacing {
    margin-bottom: 8px;
  }

  .wide-spacing {
    margin-bottom: 30px;
  }

  .no-spacing {
    margin: 0;
  }
</style>

<p class="tight-spacing">This paragraph has tight spacing.</p>
<p class="tight-spacing">Another paragraph with tight spacing.</p>

<p class="wide-spacing">This paragraph has wide spacing.</p>
<p class="wide-spacing">Another paragraph with wide spacing.</p>

First Letter and Line Styling

Create drop caps and special first-line formatting:

<style>
  .drop-cap::first-letter {
    font-size: 3em;
    font-weight: bold;
    color: #745af2;
    float: left;
    line-height: 1;
    margin-right: 8px;
  }

  .first-line::first-line {
    font-weight: bold;
    color: #745af2;
    font-variant: small-caps;
  }
</style>

<p class="drop-cap">
  This paragraph has a drop cap on the first letter. The first letter is
  styled differently to create a visual effect commonly seen in magazines
  and newspapers.
</p>

<p class="first-line">
  The first line of this paragraph is styled differently from the rest.
  This creates an elegant typographic effect that draws attention to the
  beginning of the text.
</p>

Try it Yourself

Paragraph Spacing and Margins

By default, browsers add margins to paragraphs. Understanding the default CSS can help you control spacing:

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

• Paragraphs have a default top and bottom margin of approximately 1em
• No left or right margins by default
• Adjacent paragraphs' margins collapse (the larger margin wins)
• You can reset margins with margin: 0; in CSS
• Use margin-bottom to control space between paragraphs

Text Formatting Within Paragraphs

You can use various inline elements within paragraphs for text formatting:

• <strong> or <b> - Bold text (strong is semantic, b is presentational)
• <em> or <i> - Italic text (em is semantic, i is presentational)
• <mark> - Highlighted text
• <small> - Smaller text
• <del> - Deleted/strikethrough text
• <ins> - Inserted/underlined text
• <sub> - Subscript text
• <sup> - Superscript text
• <code> - Inline code snippets
• <a> - Hyperlinks

Best Practices

• Use paragraphs for their semantic meaning - to group related sentences
• Don't use empty paragraphs (<p></p>) for spacing - use CSS margins instead
• Keep paragraphs focused on one idea or topic
• Use CSS to style paragraphs rather than deprecated HTML attributes
• Break long text into multiple paragraphs for better readability
• Use appropriate line-height (typically 1.5-1.8) for better readability
• Limit paragraph width to 60-80 characters for optimal reading experience
• Don't nest paragraphs - it's invalid HTML and will cause unexpected behavior
• Use <br> sparingly within paragraphs - usually indicates need for new paragraph

Common Styling Techniques

<style>
  /* Readable paragraph width */
  .readable {
    max-width: 65ch; /* 65 characters wide */
    line-height: 1.6;
  }

  /* Text alignment */
  .center { text-align: center; }
  .right { text-align: right; }
  .justify { text-align: justify; }

  /* Indented first line (classic book style) */
  .indented {
    text-indent: 2em;
  }

  /* No margin (for tight layouts) */
  .no-margin {
    margin: 0;
  }

  /* Responsive paragraph */
  @media (max-width: 768px) {
    p {
      font-size: 16px;
      line-height: 1.6;
    }
  }
</style>

Accessibility Considerations

• Screen readers announce paragraph boundaries, helping users navigate content
• Proper paragraph structure improves content comprehension
• Use sufficient line-height (1.5 minimum) for users with dyslexia
• Ensure adequate color contrast between text and background
• Don't use text alignment (justify) as it can create uneven spacing
• Keep paragraph language clear and concise
• Use proper semantic markup within paragraphs (strong, em, etc.)

Default CSS Settings

Most browsers will display the <p> element with the following default values:

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

Related Tags

• <div>

  Defines a division or section

• <span>

  Defines an inline section

• <br>

  Inserts a line break

• <section>

  Defines a section

• <article>

  Defines an article

• <blockquote>

  Defines a quoted section