HTML Div Tag

The HTML div tags are used to define the HTML div element. The HTML div element begins with the HTML <div> tag and ends with the HTML </div> tag. The HTML div element is useful for adding style to elements that cannot have specific characteristics set otherwise without using depreciated attributes.

HTML Div Element Attributes

HTML "div" element attributes include:

  • align - (Depreciated) The align attribute is used to set the alignment of the contents of the "div" element. 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.

Div Element Contents

The HTML div element can contain both inline elements and block HTML elements. HTML inline elements are listed at the HTML Inline Elements page. HTML block elements are listed at the HTML Block Elements.

Div Element Inside

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


HTML div Element Use Example

To provide an example, note that the HTML CENTER element is being depreciated in HTML 4.0, and there is no inline element attribute in style sheets that allows the inline elements such as anchors and images to be centered. Therefore the anchor code that follows is not centered.

Here is the HTML code:

<a href="./" target="_top">HTML Terms</a>

Here is the effect:

HTML Terms

The following code centers the anchor:

<div class="center"><a href="./" target="_top">HTML Terms</a></div>

Here's the effect:

HTML Terms

What is shown here is a simple, short example that shows how the HTML div element can be used to apply characteristics to areas of an HTML page. The same effect can be obtained by placing the anchor inside a paragraph element and setting the "text-align" value to "center", but the "div" element can be used to apply attributes to larger sections of the HTML page. Several other elements including paragraphs, headers, and lists may be contained inside the "div" element which is not possible using paragraph elements.

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.

Paragraph Contents

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


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.