HTML Paragraph Tag

HTML paragraph tags are used to define the HTML paragraph element. The paragraph element begins with the HTML <p> tag and ends with the HTML </p> tag. The HTML paragraph element should not contain tables and other block elements. A sample is shown below.

<p>
This is a sample HTML paragraph element. Any text in a paragraph goes here.
</p>


HTML Paragraph Attributes

HTML paragraph element attributes include:

  • align - (Depreciated) The align attribute is used to set the alignment of the paragraph with respect to the page size. Values are LEFT, RIGHT, and CENTER. Example: <p align="center">
  • class - The class attribute is used in conjunction with style sheets to associate an element with a class. The class attribute can set a class for specific element types or it can be independent of element types and work for all elements. The class attribute will provide the settings for specific style formatting. CSS properties are shown at the CSS Properties page.
  • ID - The ID attribute is used to apply style settings to specific individual HTML elements.
  • style - The style attribute is used to apply style settings for the specific element the style attribute is included with. An example is" <p style="font: 16pt courier"> - This sets the style or color of the text. This statement starts a paragraph with color, green: <p style="color: green">. The STYLE attribute is common to most HTML elements (See the CSS Properties page).
  • title - Used to give specific elements a title which may appear as a tooltip in some browsers when the mouse is held at or near the element.

HTML Paragraph Contents

The HTML paragraph element can only contain inline elements which are listed at the HTML Inline Elements page.

Paragraph Inside

The paragraph element can be contained inside the elements "address", "applet", "blockquote", "body", "button", "center", "del", "dd", "div", "fieldset", "form", "iframe", "ins", "li", "map", "noframes", "noscript", "object", "td", and "th".


HTML Paragraph Examples

This is the HTML code for a paragraph demonstrating use of the STYLE attribute.

<p style="text-align: 'center'; font: '16pt'; courier; color: 'blue'">
The color of the sky and lake is blue.
</p>

This is how it looks:

The color of the sky and lake is blue.


Paragraph Indentation

This example shows how to indent a paragraph using the style attribute:

<p style="margin-right: '5%'; margin-left: '5%'">
This is an example of margin indentation.
</p>

This is how it looks:

This is an example of margin indentation.

This could have been done using a set amount of spacing to indent margin such as style="margin-left: '4em'"

Use of External Style sheet

I like to use an external style sheet to control these characteristics and commonly use the class attribute with my HTML elements to apply the style characteristics to the element. For example in my HTML header element, there is a line:

<link href="style.css" rel="stylesheet" type="text/css">

This line loads a style sheet file called "style.css". The style.css file contains the following lines:

h1, h2 { text-align: center }
hr.half { color: #ff0000; height: 5; width: 50%; text-align: center }
.indent { margin-right: 5%; margin-left: 5% }

The first line assigns attributes to the h1 and h2 HTML elements so they will be centered anytime they exist. This first line applies to all h1 and h2 HTML heading elements. The second line sets style attributes to the HTML horizontal line element (hr) that is a class half so the line is 5 pixels high, its color is red, it is 50% of available space wide, and it is aligned in the center of any element it exists inside of. The second line defines a class that applies only to the HTML hr element. The third line defines a class called "indent" that can be used to apply to any HTML element. The class "indent" sets characteristics so the element that it applies to has the right and left margins indented five percent. It is used as follows:

<p class="indent">
This is an example of using an cascading style sheet class to set paragraph margin indentation.
</p>

This is how it looks:

This is an example of using an cascading style sheet class to set paragraph margin indentation.