HTML Paragraph Element

The HTML <p> element defines a paragraph of text in an HTML document. Browsers normally display each paragraph as a block and place vertical space before and after it.

Use a paragraph element for a complete unit of prose, such as an introduction, explanation, note, or description. Do not use empty paragraphs only to create visual spacing; use CSS margins or padding instead.

HTML Paragraph Tag Syntax

</>
Copy
<p>Paragraph text goes here.</p>

The opening tag is <p>, and the closing tag is </p>. Although HTML parsers can infer a missing closing tag in some situations, writing the closing tag explicitly keeps the markup clear and predictable.

Basic HTML Paragraph Example

A simple Paragraph element is shown in the following example.

index.html

</>
Copy
<!DOCTYPE html>
<html>
<head>
</head>
<body>
 
    <p>This is a paragraph.</p>
  
</body>
</html>

Note: HTML Paragraph element starts with the tag <p> and ends with an end tag </p>.

How Multiple HTML Paragraphs Are Displayed

Each <p> element starts on a new line because it is rendered as a block-level element by default. The following markup creates three separate paragraphs.

</>
Copy
<p>The store opens at 9:00 AM.</p>
<p>Online orders are processed throughout the day.</p>
<p>Customer support closes at 6:00 PM.</p>

Use separate paragraph elements when the text expresses separate ideas. A line break created with <br> does not create a new paragraph and should be reserved for content where a line break is meaningful, such as an address or poem.

Whitespace and Line Breaks Inside an HTML Paragraph

HTML collapses consecutive spaces, tabs, and source-code line breaks into a single rendered space in normal paragraph text. Adding extra spaces in the HTML file does not create wider gaps in the browser.

</>
Copy
<p>
  This paragraph contains
  several spaces and source-code line breaks,
  but the browser displays normal spacing.
</p>

To preserve formatting exactly, use an element intended for preformatted text, such as <pre>. To force a meaningful line break within a paragraph, insert <br>.

Default Browser CSS for the Paragraph Element

By default, following CSS properties are set for a paragraph.

</>
Copy
display: block;
margin-block-start: 1em;
margin-block-end: 1em;

The exact user-agent stylesheet can vary by browser. The important behavior is that paragraphs are displayed as blocks and normally receive vertical margins. You can override these defaults with your own CSS.

Inline Style for an HTML Paragraph

We can change the style of paragraph through inline styling using style attribute.

In the following program, we have set the color as red, and background as black color for the Paragraph element.

index.html

</>
Copy
<!DOCTYPE html>
<html>
<head>
</head>
<body>
 
  <p style="color:red;background:black;">This is a paragraph.</p>
  
</body>
</html>

Inline styles affect only the element on which the style attribute appears. They are useful for small demonstrations, but a stylesheet is usually easier to maintain when several paragraphs share the same design.

Apply CSS to Every HTML Paragraph

We can apply CSS for all paragraphs using the p tag.

index.html

</>
Copy
<!DOCTYPE html>
<html>
<head>
  
  <style>
    p {
      color:red;
      background:black;
    }
  </style>
  
</head>
<body>
 
  <p>This is a paragraph.</p>
  
</body>
</html>

A type selector such as p applies to every paragraph. For more precise control, assign a class and style only paragraphs that use that class.

</>
Copy
<p class="summary">This paragraph contains the article summary.</p>
</>
Copy
.summary {
  max-width: 65ch;
  font-size: 1.125rem;
  line-height: 1.6;
  margin-block: 1rem;
}

HTML Paragraph Spacing, Size, and Alignment with CSS

Paragraph spacing and text size should be controlled with CSS rather than extra spaces, repeated <br> elements, or empty <p> elements.

</>
Copy
p {
  font-size: 1rem;
  line-height: 1.6;
  margin-block: 0 1rem;
  text-align: left;
}

The font-size property changes paragraph text size, line-height controls spacing between lines, and margin properties control the space outside the paragraph. Avoid fixed heights because paragraph content can wrap differently across screens and font settings.

Useful Attributes on an HTML Paragraph

The <p> element supports global HTML attributes. Common examples include class for reusable CSS rules, id for a unique identifier, style for inline CSS, lang for the language of the text, and title for advisory information.

</>
Copy
<p id="delivery-note" class="notice" lang="en">
  Orders placed after 5:00 PM are processed the next business day.
</p>

Presentational attributes from older HTML versions, such as align, should not be used for new pages. Use CSS properties such as text-align instead.

Valid Content Inside an HTML Paragraph

A paragraph can contain text and phrasing content such as links, emphasis, inline code, images, and line breaks. It should not contain block-level structures such as headings, lists, tables, or another paragraph.

</>
Copy
<p>
  Read the <a href="/shipping-policy/">shipping policy</a>
  before placing an <strong>international order</strong>.
</p>

When the parser encounters markup that cannot remain inside a paragraph, it may automatically close the paragraph before that element. Keeping block elements outside <p> makes the document structure easier to understand and debug.

HTML Paragraph Accessibility and Readability

Use real paragraph elements instead of styled <div> or <span> elements when the content is a paragraph. Semantic markup gives browsers, assistive technologies, reader modes, and search tools a clearer document structure.

  • Keep paragraphs focused on one idea.
  • Use sufficient text and background contrast.
  • Choose a readable line height and avoid very long line lengths.
  • Do not communicate meaning through color alone.
  • Set the correct document or paragraph language when needed.

Common HTML Paragraph Mistakes

  • Using several <br> tags to separate paragraphs instead of creating separate <p> elements.
  • Adding empty paragraphs to create vertical space instead of using CSS.
  • Placing headings, lists, tables, or another paragraph inside a <p> element.
  • Expecting repeated spaces or source-code line breaks to be preserved in the browser.
  • Applying the same inline style to many paragraphs instead of using a reusable CSS class.

HTML Paragraph Questions

What is a paragraph in HTML?

A paragraph in HTML is a block of prose marked up with the <p> element. Browsers normally display it on a new line with vertical space around it.

How do you make a paragraph in HTML?

Place the paragraph text between an opening <p> tag and a closing </p> tag, for example <p>This is a paragraph.</p>.

How do you change HTML paragraph spacing?

Use CSS margin properties to control space between paragraphs and line-height to control space between lines within a paragraph.

Can a paragraph contain another paragraph in HTML?

No. A <p> element cannot contain another <p> element. Start a new paragraph after closing the current one.

Is the closing paragraph tag required?

HTML allows the closing tag to be omitted in limited cases, but explicitly writing </p> is clearer and reduces mistakes when editing or nesting nearby elements.

HTML Paragraph Editorial QA Checklist

  • Confirm every paragraph opens with <p> and is clearly closed with </p>.
  • Check that no heading, list, table, or nested paragraph appears inside a paragraph element.
  • Verify paragraph spacing is handled with CSS rather than empty paragraphs or repeated line breaks.
  • Test paragraph text at narrow screen widths to confirm readable wrapping and line height.
  • Check that classes, IDs, language attributes, links, and inline elements are valid and used for a clear purpose.

Summary of the HTML Paragraph Element

The <p> element represents a paragraph of text. It is displayed as a block by default, collapses normal whitespace, accepts global HTML attributes, and can be styled with CSS for spacing, size, color, and alignment. Use separate paragraph elements for separate ideas and keep block-level structures outside them.

Continue with this HTML Tutorial to learn how paragraph elements work with other HTML text and document-structure elements.