FactorPad
Faster Learning Tutorials

HTML p tag

The p or paragraph tag creates a block of text. This paragraph is often set apart from other text with a wider vertical margin.
  1. About - Understand the purpose of the p tag.
  2. Syntax - Describe how it is used.
  3. Settings - View required and optional attributes plus default behaviors.
  4. Examples - Review common examples.
by Paul Alan Davis, September 5, 2018
Updated: December 19, 2018
The paragraph tag is one of the most frequently used tags. It's also one of the easiest to learn, as you will see.

Outline Back Next

~/ home  / tech  / html5  / reference  / html p tag


HTML p tag

Beginner

The <p> tag is so easy to learn because it has no attributes unique to it alone. Of course global attributes apply, as they do with all elements.

Another simplification is that in HTML5, paragraph styling is set with Cascading Style Sheets (CSS) instead of inside each <p> element.

HTML Tags Reference

1. About the HTML p tag

The <p> tag sits inside the <body> element, which means it is in the visible part of the document.

Its purpose is to create a block of text that shares the same styling as other <p> elements on the page.

As a block-level element, the paragraph element takes up the whole space of its parent element after starting on a new line. This behavior is unlike inline-element that start anywhere in a line.

Normally, the <p> element holds other inline elements and are as much about setting the structure, or the "flow" of a document, as they are about displaying text.

2. Syntax for the HTML p tag

For the <p> tag in HTML5 it is advised to use a closing </p> tag.

Because many HTML authors often forget the closing </p> tag, most browsers will render the document properly without it. However, since it is easier to close this tag instead of learn the rules where it need not be closed, it is better to close it. Many document validators, like the W3C Markup Validation Service (opens in a new browser) are more strict than browsers and will warn you to close this <p> element.

The text visible on the web page sits between the open and close tags.

The <p> element includes no unique arguments other than global arguments.

Horizontal whitespace is limited to one character in most browsers, so use the <pre> tag if you wish to preserve whitespace. Vertical whitespace is trimmed.

Sample HTML input
<body> <p> Carriage returns, extra spaces and text that wraps across several lines will be trimmed within a paragraph element. </p> <p> This paragraph demonstrates how spacing between two paragraphs can look, depending on CSS settings. Notice extra space between each paragraph? </p> <p> As for coding style, multi-line paragraphs are often coded with opening and closing tags on different lines like this. </p> <p>On single lines this format is okay.</p> </body>

HTML code input as above will output the paragraphs shown below.

Sample HTML output

Carriage returns, extra spaces and text that wraps across several lines will be trimmed within a paragraph element.

This paragraph demonstrates how spacing between two paragraphs can look, depending on CSS settings. Notice extra space between each paragraph?

As for coding style, multi-line paragraphs are often coded with opening and closing tags on different lines like this.

On single lines this format is okay.

3. Settings for the HTML p tag

As with all tags, >Global Attributes can always be set.

Attributes and values for the p tag

The <p> element doesn't have any of its own attributes. That said, the id global attribute often is used to identify an element by name.

Default behaviors

Each user-agent (browser) has its own stylesheet per se. This dictates how that browser styles each element by default. The Chrome browser styles the <p> element using the following specifications.

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

4. Examples of the HTML p tag

Example 1 - Create a paragraph with the id "opening"

The following HTML code will create a paragraph block with the style attributes specified in a CSS document. Here we also assign the global id attribute and call it "opening".

<html> <head></head> <body> <p id="opening"> This is the opening paragraph for this web page. All extra line breaks and extra spaces will be removed. </p> </body> </html>

Type or copy the lines above into a text file with the .html extension and open it in a browser to see the result.

The id attribute can be used to create a hyperlink to that section using an <a> tag. See a tag to learn about how to anchor a hyperlink.

Also using JavaScript the developer can make automated changes to this named "opening" paragraph based on an action taken by the user, like pushing a button to replace text.


Other Related HTML Content

The <p> tag sits within the body of the HTML document.


What's Next?

See what else you can learn for free at our YouTube Channel. Subscribe here.

  • For the complete HTML tag list, click Outline.
  • To learn about the <a> tag, click Back.
  • To see the best way to insert a line break with <br />, click Next.

Outline Back Next

~/ home  / tech  / html5  / reference  / html p tag



 
 
Keywords:
html p tag
html p element
paragraph tag
html p
p element
p tag
element p
paragraph element
p style
html paragraph
html5 paragraph
html p tag defaults