HTML p Tag - Create a Block of Text with a Paragraph Tag | HTML Tags List

Understanding the HTML p Tag

Beginner

The  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  element.

HTML Tags Reference

1. About the HTML p tag

The  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  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  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  tag in HTML5 it is advised to use a closing  tag.

Because many HTML authors often forget the closing  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  element.

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

The  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> 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. </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  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  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> This is the opening paragraph for this web page. All extra line breaks and extra spaces will be removed. </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.

HTML p Tag Reference and Examples