The HTML <p> tag

Definition and Usage

<p> tag to define a paragraph.

Browsers will automatically add an empty line before each <p> Add an empty line before and after the element.

Tip:Use CSS Set paragraph styles.

See also:

HTML Tutorial:HTML Paragraph

HTML DOM Reference Manual:Paragraph Object

Example

Example 1

Mark paragraphs like this:

<p>This is some text within a paragraph.</p>

Try It Yourself

Example 2

Align text within paragraphs (using CSS):

<p style="text-align:right">This is some text within a paragraph.</p>

Try It Yourself

Example 3

Use CSS to set paragraph styles:

<html>
<head>
<style>
p {
  color: navy;
  text-indent: 30px;
  text-transform: uppercase;
}
</style>
</head>
<body>
<p>China, officially known as the People's Republic of China (PRC), is a country located in East Asia. It is the world's second most populous country, with a population exceeding 1.4 billion. China spans an equivalent of five time zones and shares land borders with fourteen countries. With an area of nearly 9.6 million square kilometers (3,700,000 square miles), it is the third-largest country by total land area. The country is divided into 22 provinces, five autonomous regions, four municipalities, and two semi-autonomous special administrative regions. Beijing is the national capital, while Shanghai is the most populous city and the largest financial center.</p>
</body>
</html>

Try It Yourself

Example 4

More paragraphs:

<p>
in the source code,
this paragraph
contain many lines,
But browsers
Ignore it.
</p>

Try It Yourself

Example 5

HTML Poem Issue:

<p>
　　Farewell to the White Emperor in the colorful clouds.
　　A thousand miles away, Jingling is back in a day.
　　The monkeys on both sides of the river keep crying and won't stop.
　　The boat has passed through ten thousand mountains.
</p>

Try It Yourself

Global Attributes

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

Event Attributes

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

Default CSS Settings

Most browsers will use the following default values to display <p> Element:

p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

Try It Yourself

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support