HTML Element: p

The HTML <p> element represents a paragraph, and is one of the most commonly used block level elements. HTML paragraphs can be used to structure any group of related content, such as images, videos, or form controls.

Example

Syntax

Content generated by heisenbergipsum.com.

1
<p>Gus is gonna make his move. I don't know when, I don't know where or how. All I know is it's gonna happen. Powerless to stop him.</p>
2

3
<p>My partner was about to get himself shot. I intervened. He was angry because those two dealers of yours had just murdered an eleven year-old boy. Then again, maybe he thought it was you who gave the order.</p> 
4

5
<p>He has enough money to last forever. He knows he needs to keep moving. You'll never find him. He's out of the picture. I saved his life, I owed him that, but now he and I are done.</p>

Result

By default, browsers separate paragraphs with a single blank line.

The + adjacent sibling combinator is the perfect CSS selector for indenting all paragraphs except the first.

Browser Support

The p element is supported in all modern browsers. Read more on caniuse.com.

Attributes

A p element supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them).

Content

The p element supports phrasing content; inline elements that are used to mark up textual content, such as <span>, <em>, <strong>, and <a>.

List elements (i.e., ul, li) cannot be children of p elements. 

Accessibility

Break content into paragraphs to make a page more accessible. Assistive technologies then know how to provide shortcuts to let users skip to the next or previous paragraph, letting them skim content more efficiently.

Avoid using empty paragraph tags for creating visual space between content. Assistive technologies still treat these empty tags as content to read, which does a disservice to the end user. Use CSS to offset content as necessary instead. 

Learn More


This content originally appeared on Envato Tuts+ Tutorials and was authored by Andy Leverenz

The HTML <p> element represents a paragraph, and is one of the most commonly used block level elements. HTML paragraphs can be used to structure any group of related content, such as images, videos, or form controls.

Example

Syntax

Content generated by heisenbergipsum.com.

1
<p>Gus is gonna make his move. I don't know when, I don't know where or how. All I know is it's gonna happen. Powerless to stop him.</p>
2
3
<p>My partner was about to get himself shot. I intervened. He was angry because those two dealers of yours had just murdered an eleven year-old boy. Then again, maybe he thought it was you who gave the order.</p> 
4
5
<p>He has enough money to last forever. He knows he needs to keep moving. You'll never find him. He's out of the picture. I saved his life, I owed him that, but now he and I are done.</p>

Result

By default, browsers separate paragraphs with a single blank line.

The + adjacent sibling combinator is the perfect CSS selector for indenting all paragraphs except the first.

Browser Support

The p element is supported in all modern browsers. Read more on caniuse.com.

Attributes

A p element supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them).

Content

The p element supports phrasing content; inline elements that are used to mark up textual content, such as <span>, <em>, <strong>, and <a>.

List elements (i.e., ul, li) cannot be children of p elements. 

Accessibility

Break content into paragraphs to make a page more accessible. Assistive technologies then know how to provide shortcuts to let users skip to the next or previous paragraph, letting them skim content more efficiently.

Avoid using empty paragraph tags for creating visual space between content. Assistive technologies still treat these empty tags as content to read, which does a disservice to the end user. Use CSS to offset content as necessary instead. 

Learn More


This content originally appeared on Envato Tuts+ Tutorials and was authored by Andy Leverenz


Print Share Comment Cite Upload Translate Updates
APA

Andy Leverenz | Sciencx (2023-03-20T19:54:01+00:00) HTML Element: p. Retrieved from https://www.scien.cx/2023/03/20/html-element-p/

MLA
" » HTML Element: p." Andy Leverenz | Sciencx - Monday March 20, 2023, https://www.scien.cx/2023/03/20/html-element-p/
HARVARD
Andy Leverenz | Sciencx Monday March 20, 2023 » HTML Element: p., viewed ,<https://www.scien.cx/2023/03/20/html-element-p/>
VANCOUVER
Andy Leverenz | Sciencx - » HTML Element: p. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/03/20/html-element-p/
CHICAGO
" » HTML Element: p." Andy Leverenz | Sciencx - Accessed . https://www.scien.cx/2023/03/20/html-element-p/
IEEE
" » HTML Element: p." Andy Leverenz | Sciencx [Online]. Available: https://www.scien.cx/2023/03/20/html-element-p/. [Accessed: ]
rf:citation
» HTML Element: p | Andy Leverenz | Sciencx | https://www.scien.cx/2023/03/20/html-element-p/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.