Divisions (with the <div> tag)

To structure HTML documents into divisions or sections, the <div> tag is used. The <div> tag specifies a logical block without predefined meaning or rendering infomration. Orginally, the tag was mostly used to align sections of content in a document with the align attribute. The followings shows an example:

<div align="right">
<h4>Division heading</h4>
<p>Paragraph 1. This text is right-aligned. The div affects paragraph and other block elements.</p>
<p>Paragraph 2. This text is also right-aligned.</p>
</div>

The following shows the output of the above code:

Division heading

Paragraph 1. This text is right-aligned. The div affects paragraph and other block elements.

Paragraph 2. This text is also right-aligned.

Although it is not apparent from the above the example, the <div> tag produces a line break after the tag is closed (</div>). The <div> is a block element.

Styling with <div> tag

The <div> tag is today commonly used to apply style sheet fomatting properties to a desired part of a document. See the following as an example:

<div style="color:#CC3333; text-align:right;">
<p>Paragraph 1 inside div tag 1.</p>
<p>Paragraph 2 inside div tag 1.</p>
</div>
<div style="color:#00CC66">
<p>Paragraph 1 inside div tag 2.</p>
<p>Paragraph 2 inside div tag 2.</p>
</div>

That produces

Paragraph 1 inside div tag 1.

Paragraph 2 inside div tag 1.

Paragraph 1 inside div tag 2.

Paragraph 2 inside div tag 2.

In the first <div> tag we change the color of the text and right-align the text. In the second <div> tag we only change the color of the text and keep the default text alignment (left).