The <p> element

This is a temporary page to pull together an example of what the ideal end state will be. This has been written by Chris Mills to serve as a sample.

Summary

<p> — the paragraph element — is used to mark up a single paragraph in a given body of content. Wrapping content in paragraph tags will generally cause that content all to be rendered in a single block, with a margin above and below.

Usage Context

||
|Categories|Paragraphs are phrasing content according to HTML5’s definitions. It is also known to be a block level elements, under the earlier HTML definitions.|
|Permitted contents|Text, or any inline or text-containing flow content, such as <a>, <em>, <strong> or <q>.|
|Tag Omission|None — the start and end tags are mandatory.|
|Permitted Parent Elements|Any element that can contain flow content, typically content sectioning elements such as <article>, <div> or <blockquote>|
|Permitted Child Elements|Chris - I don’t think this is needed, as well as the permitted content, which I have renamed slightly to “permitted contents”|

DOM Information

DOM Interface

The <p>, or paragraph element implements the [HTMLAudioElementHTMLParagraphElement] interface.

Inheritance Hierarchy

[Node](http://webplatform.org/docs/WPD/CSS_Example_Article)

[Element](http://webplatform.org/docs/WPD/CSS_Example_Article)

[HTMLElement](http://webplatform.org/docs/WPD/CSS_Example_Article)

[HTMLParentElement](http://webplatform.org/docs/WPD/CSS_Example_Article)

Members

Implementation Note The Members tables are autogenerated. The Events, Methods, and Properties tables are collapsed, until a user expands them.

[Attributes] [Events] [Methods] [Properties]

Attributes

Like all other HTML elements, this element supports the [http://webplatform.org/docs/WPD/CSS_Example_Article global attributes. Attribute particular to this element are as follows:

• align

  The paragraph element align attribute can be given values of left, right, center or justify, to align the content inside the paragraph. But please note that this is a presentational attribute, now deprecated in HTML5.

The best practice would be to align your text using the CSS text-align property instead.

Examples

<code><p>This is one paragraph of content.

<p>This is another paragraph of content. See how it appears below the last paragraph on a new line.

<p>This is a paragraph of content inside a blockquote.</code>

Chris - I don’t think we need to show JS and CSS examples affecting simple HTML content. I think this just muddies the waters a bit, for people trying to learn these basic rudiments.

View live examples

A useful HTML example that shows the element in context.

//LANGUAGE-TAG: JavaScript
A useful JavaScript example that calls to the element.

Best practices

• As said above, you should not align content with the <p> element’s align attribute. Use the CSS text-align property instead.
• You should separate all paragraphs out by wrapping each of them in their own unique <p> element. Do not separate out paragraphs by other means, such as wrappign all your content in a <pre> element, or using multiple <br >tags.
• To alter the position or spacing of your paragraphs, dop not use presentational HTML; use appropriate CSS such as padding and margin.

Chris - I’ve delete a lot of the sections from here, as I thought they were a bit repetitious. I thought “Best practices” would help to encompass all the good examples of usage and other things not said in other sections.

Specifications

Browser Compatibility

Desktop

Implementation Note: The prefix tag (here, a fake value just to show it off) would be a link to the concept of prefixes.

Mobile

Compatibility Notes

See Also

Tutorials and Guides

A list of relevant tutorials and other conceptual materials

Reference

A list of related elements, methods, etc.

<details> <summary>This article contains content originally from external sources, including ones licensed under the CC-BY-SA license.</summary>

Portions of this content copyright 2012 Mozilla Contributors. This article contains work licensed under the Creative Commons Attribution-Sharealike License v2.5 or later. The original work is available at Mozilla Developer Network: <a href="http://developer.mozilla.org/foo" target="_blank">Foo</a>

Portions of this content come from Foo.org: <a href="http://foo.org/baz" target="_blank">Baz</a>

</details>