Since:		HTML 4(1997)

The  tag represents a paragraph. Use it to group a block of related text into a single paragraph. By default, browsers automatically add margin above and below each paragraph.

Syntax

<p>This is one paragraph.</p>
<p>This is another paragraph. Margin is added above and below automatically.</p>

Sample Code

sample_p.html

View sample page

<!-- Multiple paragraphs in sequence -->
<article>
  <h2>What is Programming?</h2>

  <!-- Use paragraphs to group blocks of text -->
  <p>Programming means writing instructions that tell a computer what to do.
  You write the steps in a language the computer understands (a programming language), and the computer executes them.</p>

  <p>There are many programming languages, including JavaScript, Python, PHP, and Swift.
  Each excels in different areas, so you choose the language that best fits your goal.</p>

  <!-- Inline elements can be placed inside a p tag -->
  <p>Beginners are recommended to start with <strong>HTML</strong> and <em>CSS</em>.
  See <a href="/tpl_rep.php?cat=html-beginner&fl=r1&lang=en">HTML Basics</a> for more details.</p>
</article>

<!-- Combining inline elements and images -->
<p>
  <img src="icon.png" alt="Warning icon" width="16" height="16">
  This operation cannot be undone. <strong>Always make a backup first</strong> before proceeding.
</p>

<!-- Splitting a long text into multiple paragraphs -->
<p>HTML is a markup language used to create the structure of web pages. It uses elements such as headings, paragraphs, links, and images to organize a document.</p>

<p>CSS is a stylesheet language that adds visual styling to HTML. It controls colors, fonts, and layout.</p>

<p>JavaScript is a programming language that adds interactivity to web pages. It lets you handle button clicks, animations, and other dynamic behaviors.</p>

Result

The three paragraphs are each displayed on their own line, with margin added automatically between them. In the third paragraph, "HTML" appears in bold, "CSS" appears in italics, and "HTML Basics" appears as a link.

View sample page

Notes

Because  is a block-level element, a line break is inserted before and after it automatically. If you need a line break within a paragraph, use the   tag — but to separate distinct paragraphs, writing separate  elements is the correct approach in HTML.

Inside a  tag, you can place inline elements such as text, links, images, and emphasis tags (, ). However, the HTML specification does not allow block-level elements (such as <div> or another ) to be nested inside a  tag. If you try to nest them, the browser will automatically close the tag for you.

Using empty  tags or consecutive   tags just for spacing is generally avoided, though the appropriate approach depends on your use case. Controlling spacing with the CSS margin and padding properties is the common practice.

Common Mistakes

Using empty p tags for spacing

Adding empty  tags or multiple consecutive   tags to create vertical space is a common pattern, but it is generally discouraged. Screen readers may announce the empty paragraph, and the semantic structure of the HTML is compromised. Controlling spacing with CSS margin or padding is easier to maintain.

<p>First paragraph</p>
<p></p>
<p>Next paragraph</p>

The following example shows how this works in practice:

<p style="margin-bottom: 2em;">First paragraph</p>
<p>Next paragraph</p>

Nesting block elements inside p

The HTML specification does not allow block-level elements such as <div> or another  inside a  tag. The browser will automatically close the tag, resulting in an unexpected HTML structure.

<p>Text <div>Block element</div></p>

<p>Text <span>inline element</span></p>

CSS Styling

Applying CSS to  elements can greatly improve readability.

/* Basic paragraph styling */
p {
  line-height: 1.8; /* Wider line spacing (1.6–1.8 is a common range for body text) */
  margin-bottom: 1.2em; /* Space between paragraphs */
  color: #333;
}

/* Text indent: common in Japanese typography */
p {
  text-indent: 1em; /* Indent the first line by one character */
}

/* ::first-letter pseudo-element for a drop cap effect */
p:first-of-type::first-letter {
  font-size: 3em;
  font-weight: bold;
  float: left;
  line-height: 1;
  margin-right: 0.1em;
  color: #4488ff;
}

/* ::first-line pseudo-element to style only the first line */
p::first-line {
  font-weight: bold;
  color: #222;
}

By default, browsers add approximately 1em of vertical margin (top and bottom) to  elements. A common pattern is to set one side to 0 and let the other side control the spacing.