HTML <p> Tag Tutorial - Usage, Syntax,
Attributes and Example

calender-iconPublished: 15 May 2025

clock-icon5-min read

printer-icon whatsapp-icon share-icon



close-button
HTML
Table of Contents

INTRODUCTION

The HTML <p> element represents a paragraph and is used to create paragraphs. Paragraph is generally a block of text which is separated from other block elements by blank lines. They are not limited to text only and can contain other content like images, buttons and other elements.

Syntax: 
<p> text-content </p>

Example: 

<p>
The French inventor Nicolas-Joseph Cugnot built the first steam-powered road vehicle in 1769, while the Swiss inventor François Isaac de Rivaz designed and constructed the first internal combustion-powered automobile in 1808. The modern car—a practical, marketable automobile for everyday use—was invented in 1886, when the German inventor Carl Benz patented his Benz Patent-Motorwagen. Commercial cars became widely available during the 20th century.
</p>

Output:

The French inventor Nicolas-Joseph Cugnot built the first steam-powered road vehicle in 1769, while the Swiss inventor François Isaac de Rivaz designed and constructed the first internal combustion-powered automobile in 1808. The modern car—a practical, marketable automobile for everyday use—was invented in 1886, when the German inventor Carl Benz patented his Benz Patent-Motorwagen. Commercial cars became widely available during the 20th century.

Attributes

The HTML <p> element only has global attributes.

IMPORTANT PROPERTIES
  1. Paragraphs are block-level elements which can be changed through CSS.
  2. By default a single blank line is added before and after a paragraph which is margin added by browser.
  3. Whitespace is any string of spaces, tabs or line breaks. White space in HTML code is ignored.
    • If developer add space between words in HTML code then browser ignores it and reduce it to single space when shown on webpage.
    • If developer write text on multiple line in HTML code, it is ignored by browser and converted into single line when shown on webpage.
  4. Using paragraph makes page more accessible. Screen readers provide shortcut to skip to next or previous paragraphs.
  5. Indentation
    Indentation in HTML code is ignored. Hence if you want to show text indentation, it can be achieved by using text-indent property of CSS.
    6. Example: 
    
<p style="text-indent:1rem">
The French inventor Nicolas-Joseph Cugnot built the first steam-powered road vehicle in 1769, while the Swiss inventor François Isaac de Rivaz designed and constructed the first internal combustion-powered automobile in 1808. The modern car—a practical, marketable automobile for everyday use—was invented in 1886, when the German inventor Carl Benz patented his Benz Patent-Motorwagen. Commercial cars became widely available during the 20th century.
</p>
    Output:

    The French inventor Nicolas-Joseph Cugnot built the first steam-powered road vehicle in 1769, while the Swiss inventor François Isaac de Rivaz designed and constructed the first internal combustion-powered automobile in 1808. The modern car—a practical, marketable automobile for everyday use—was invented in 1886, when the German inventor Carl Benz patented his Benz Patent-Motorwagen. Commercial cars became widely available during the 20th century.


  6. Ending Tag Omission
    The start tag of <p> is required but the end tag can be omitted if any one of the below conditions is satisfied.
    • The end tag can be omitted if <p> element is immediately followed by <address>, <article>, <aside>, <blockquote>, <details>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1> to <h6>, <header>, <hgroup>, <hr>, <main>, <menu>, <nav>, <ol>, <pre>, <search>, <section>, <table>, <ul> or <p> element.
    • If the parent element has no more content and parent element is not <a>, <audio>, <del>, <map>, <ins>, <noscript> or <video> element.

Frequently Asked Questions (FAQ)

What is the HTML role for paragraph?
In HTML, the paragraph (<p>) element does not have a specific ARIA (Accessible Rich Internet Applications) role because it is a native semantic element that browsers and assistive technologies automatically recognize as a block of text. HTML implicitly assigns the "paragraph" role to <p> element, making it unnecessary to define a specific ARIA role.

Can HTML paragraph contain other HTML elements?
Yes, HTML paragraphs element can contain other HTML elements, but only inline elements such as: <strong>, <em>, <span>, <a>, <abbr>, <cite>, etc.

How to create a DIV with only vertical scroll-bars for long paragraphs?
To create a <div> with only vertical scrollbars for long paragraphs, you can use CSS overflow-y: auto; and overflow-x: hidden; to enable vertical scrolling while preventing horizontal scrolling.

What are text formatting tags in html?
HTML (HyperText Markup Language) uses specific tags to format text, making web content visually appealing and semantically meaningful.

<b> - Makes text bold, used for non-important text
<i> - Italicizes text
<u> - Underlines text
<small> - Reduces text size, often for legal documents
<mark> - highlight text with a background color
<strong> - Indicates strong importance
<em> - Indicates emphasis, typically italics.
<abbr> - Marks abbreviations.
<address> - Marks contact details
<code> - For code snippets
<pre> - Preserves whitespace, ideal for code blocks.
<time> - Marks dates and times

How do you make a paragraph in HTML?
To create a paragraph in HTML, use the <p> tag. This block-level element wraps text to form a paragraph, automatically adding spacing (typically 1em margins) before and after for readability.

How can I prevent the <p> tag from creating a new line in HTML?
To avoid a new line when using the <p> tag in HTML, you typically shouldn't use <p> at all—because <p> is a block-level element and always renders with a line break before and after. To avoid line breaks, prefer using inline elements like <span> Changing the display of <p> to inline is possible but not semantically correct.

Can the HTML <small> tag be placed inside a <p> tag?
Yes, a small tag can be used inside a p tag in HTML. The small is a phrasing content element, and p elements are allowed to contain phrasing content. It is semantically used to represent side comments, disclaimers, or fine print.

What is the difference between HTML <p> and <div> tags?
The <p> element

Purpose: Represents a paragraph of text, used for organizing content into readable blocks, typically for prose or textual content.
Semantics: Carries a specific semantic meaning, indicating that the content is a unit of text, like a sentence or group of sentences.

The <div> element

Purpose: A generic container used to group content or elements for styling or scripting purposes, without implying specific meaning.
Semantics: Lacks semantic meaning; its a neutral block-level container for organizing or structuring content.

Can the HTML <p> tag contain a <div> tag inside it?
Beacuse the HTML <p> tag is meant to contain only phrasing content (inline-level elements like <span>, <strong>, <a>, etc.). While <div> is a block-level element (flow content), which is not allowed inside a <p>.

if a block-level element like <div> is placed inside a <p>, the browser automatically closes the <p> tag before the <div> begins. This results in unexpected layout and behavior, often breaking your intended structure.