The <div> tag is a block-level container in HTML used for grouping elements, without inherent meaning or styling. It's versatile for layouts, styling, and JavaScript manipulation, starting on a new line and taking full width by default. When used with JavaScript this became a powerful tool for creating dynamic content or style in a webpage.
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.
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.
AttributesAlign: Values : left, right, center, justify
We can set the align attribute to different values and manage the text within the div tag area.
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.