Div Tag tutorial on attributes align id and style property

Div tag is widely used as layout tool in web pages. We can divide different areas of web page using div tags. When used with JavaScript this became a powerful tool for creating dynamic content or style in a webpage. Here we will try to understand the basics of div tag.

Using div tag we can control a particular area or a block of code and text within it. Here is a simple structure of div tag.

<div id="my_area">

My text here 

</div>

More on Div Tag Positioning of Div Mouseover Div Layer on links OnClick & onDblClick of Div Show & Hide Div Layer Help message Layer

You can see we have defined the are within the div tag with id=my_area , this is useful for us to further manage the area using DHTML. We will learn them in our next tutorial. Now we will learn different attributes with examples.

Attributes Align: Values : left, right, center, justify
We can set the align attribute to different values and manage the text within the div tag area.

class

We can integrate our existing style sheet and define a class for the div tag. Here is the code to integrate an existing class to the div tag

<div id="my_area"  class="data">
This is a right aligned text2

</div>

Title

Now let us try to add one title to this div tag. On mouse over the div area title text will be displayed like alt tag of images. Here is the code

<div id="my_area"  class="data" title="This is a test for title on Div tag">
This is a right aligned text2
</div>

To see the example place your mouse over this line

ID

This is document wide identifier for the div. This is highly used in DHTML ( using JavaScript ) to manage content and various display properties of the Div element.

<div id="info_box" >
This is some text
</div>

Style

We can assign inline style properties to our DIV box

<div id='my_page2' style="z-index: 2; position: relative; right: 0px; top: 10px; background-color: #cccc33; width: 180px; padding: 10px; color: white; border: #0000cc 2px  dashed; ">
Inline style is used here
</div>

In addition to this there are more attributes like onClick, ondblclick, onmouseover, onmouseout, onmousmove, onkeypress, onkeydown, onkeyup.

We will try to learn more on application of div tag in DHTML by placing mouse over it.

Integrating id align class to Div Tag

class

Title

ID

Style

Subscribe