HTML <p> Tag and How To Style Paragraphs

 

Wednesday, August 13, 2014

The ❰p❱ tag is used for paragraphs. ❰p❱ description, syntax, usage, attributes and examples. HTML-5.com is a great guide for web developers. TV Series & Actors and Actresses. Follow TV Series and HTML 5 on Google+.

ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.

If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

PDF mobile

The <p> Paragraph Tag

Use the <p> tag for paragraphs in HTML 5

The <p> tag is used to code paragraphs in HTML. It is one of the block tags used to group content in HTML and is one of the most common tags in HTML.

A simple example of <p> tag code:

<p>A <dfn>paragraph element</dfn> in HTML includes the
starting <p> tag, ending </p> tag and everything between.</p>

Here is a demo of the example of HTML <p> tag with style below. This demo works best in a WebKit browser such as Chrome or Safari.

Example of a paragraph using the HTML <p> tag.

back to top

<p> Tag Syntax

Rules for coding HTML p elements
<body>
   ...
   ... flow content allowed ...
   <p>... phrasing content ...
   ... phrasing content ...</p>
   ...
</body>

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

  1. To create a paragraph, code a p element where flow content is allowed.
  2. Begin the p element with a starting <p> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
  3. Include any HTML global attributes on the <p> tag as appropriate.
  4. End the p element with a matching </p> closing tag.
  5. Inside the p element, between the <p> starting tag and the </p> ending tag, code the inner HTML phrasing content for the content of the paragraph.
Content of the p element

The content of the b element can include HTML comments, text content and any tags that can be used in phrasing content.

Validation Errors

If the p element is used where phrasing content is expected, the W3C Markup Validation Service will report an error such as:

Line line#, Column col#: HTML element p not allowed as child of HTML element element in this context. Contexts in which element p may be used: Where flow content is expected. Content model for element element: Phrasing content.

Other tools that validate HTML code may report a similar error. In electronic publishing, for example:

element "p" from namespace "http://www.w3.org/1999/xhtml" not allowed in this context

To resolve this type of error, remove the <p> and </p> tags from any context where phrasing content is expected or move the p element and its inner HTML inside one of the HTML elements where flow content is allowed.

If an element that is restricted for use in flow content is included in the inner HTML code of the p element, the W3C Markup Validation Service will report an error like this:

Line line#, Column col#: HTML element element not allowed as child of HTML element p in this context. Contexts in which element element may be used: Where flow content is expected. Content model for element p: Phrasing content.

Other tools that validate HTML code may report a similar error. In electronic publishing, for example:

element "element" from namespace "http://www.w3.org/1999/xhtml" not allowed in this context

To resolve this type of error, remove the tag(s) in error from the inner HTML of the p element, which is restricted to phrasing content, or move the element(s) outside of the paragraph, to a location where flow content is allowed.

back to top

<p> Tag Attributes

Attributes of the <p> tag
global attributes The only attributes that can be coded on the <p> tag are the common HTML attributes.

back to top

<p> Paragraph Tag Examples

Examples of the <p> tag in HTML 5
Example of <p> tag with style
(see <p> tag demo above)
<div>
<style scoped="scoped">
@-webkit-keyframes rotate-in {
   0% {
      opacity: 0.3;
      -webkit-transform: rotate(-20deg) scale(0.05);
      -webkit-animation-timing-function: linear;
   }
   80% {
      opacity: 0.95;
      -webkit-transform: rotate(0deg) scale(0.95);
      -webkit-animation-timing-function: linear;
   }
   100% {
      opacity: 1.0;
      font-size: 180%;
      -webkit-transform: rotate(0deg) scale(1.0);
      -webkit-animation-timing-function: ease-in;
   }
}
.rotate-in {
   height: 2.2em;
   text-align: center;
   -webkit-animation-name: rotate-in;
   -webkit-animation-duration: 1.0s;
}
</style>
<p class="rotate-in">Example of a paragraph using the HTML <p> tag.</p>
</div>

back to top

Changes in HTML 5 - <p> Tag

What's new in HTML 5
Differences between HTML 5 and earlier versions of HTML

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the p element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

back to top

Valid HTML 5