div tag in html with example

Home » HTML » HTML Tags » div tag in html with example

Posted by 20Fingers2Brains on Tags: HTML , HTML Tags

The <div> tag defines a division or a section in an HTML document.
Using <div> tag, you can group large sections of HTML elements together and format them with CSS.
The <div> tag can contain almost any other element. Browsers always place a line break before and after the <div> element.
The <div> tag is supported in all major browsers.

Example :

     <html>
     <head>
     <title>Div</title>
     </head>
     <body>
     <div id="div1">
     <p>This is content of div1.</p>
     </div>
     <div id="div2">
     <p>This is content of div2.</p>
     </div>
     </body>
     </html>

Demo :

In the above example, we have created two divs. We have included paragraph element inside the div element.

div and Style :

<html>
<head>
<title>DivStyle</title>
<style type="text/css">
div
{
font-family:comic sans ms;
color:green;
display:block;
border-style:ridge;
}
</style>
</head>
<body>
<div id="div1">
<p>This is content of div1.</p>
</div>
<div id="div2">
<p>This is content of div2.</p>
</div>
</body>
</html>

Demo :

In the above example, we have rendered two divs and applied CSS to them. We have use element selector to apply CSS.

div and Javascript :

<html>
<head><title>DivJavascript</title>
<style type="text/css">
div
{
border:solid 1px black;
}
</style>
<script type="text/javascript">
function div()
{
var element=document.createElement("div");
var text=document.createTextNode("This is div effect.");
element.appendChild(text);
element.setAttribute("class","div");
document.getElementById("div").appendChild(element);
}
</script>
</head>
<body>
<div id="div">
</div>
<input type="button" id="b1" value="Press" onclick="div()">
</body>
</html>

Demo :

In the above example, we have used javascript to render a div. The div is created on button click, CSS class is also assigned and it is appended to the existing div.