<div> is a very useful and popular HTML tag. <div> is mainly used to group multiple HTML elements and provide some attributes to this group of elements. As a popular and longtime tag, it is supported by all of the web browsers like Google Chrome, Mozilla Firefox, Microsoft Edge/Explorer, Opera, Safari, etc.
Define Div <div> Element
A div element can be defined with starting and closing tags <div> and </div>. We can use all of the other HTML elements inside the div element. In this part, we will provide an example that contains some text, button, etc. inside a div element.
<html>
<head>
<style></style>
</head>
<body>
<div>
This is poftut.com
<button>ABC</button>
</div>
</body>
</html>
Div Styling with Inline Attributes
Like other HTML tags, div tags can be styled in different ways. We can style inside the div tag by using style attribute. In this example, we will provide the style inside the tag.
<html>
<head>
<style></style>
</head>
<body>
<div style="border:5px dotted black">
This is poftut.com
<button>ABC</button>
</div>
</body>
</html>
Div Styling with CSS Style Tag
We can also style a div with the style tag. We will just put the style tag inside the head tag and then use div {} and put style information into curly braces.
<!DOCTYPE html>
<html>
<head>
<style>
div {width:200px;background:#D8FBD6;border:3px dotted black;padding:8px;}
</style>
</head>
<body>
<div>
This is poftut.com
<button>ABC</button>
</div>
</body>
</html>
Div Attributes
Div provides standard and general attributes of the HTML tags like id, class, etc. In this example, we will set the id as mydiv. The class mylist.
<html>
<head>
<style>
#mydiv {width:200px;background:#D8FBD6;border:3px dotted black;padding:8px;}
</style>
</head>
<body>
<div id='mydiv' class='mylist'>
This is poftut.com
<button>ABC</button>
</div>
<div>
This is poftut.com
<button>ABC</button>
</div>
</body>
</html>
Div Inside Div
We can put divs inside divs. We will just put div tags inside divs. In this example, we will put 2 divs inside one div.
<html>
<head>
<style>
#mydiv {width:200px;background:#D8FBD6;border:3px dotted black;padding:8px;}
#parentdiv {width:400px;background:#D8FBD6;border:3px dotted black;padding:14px;}
</style>
</head>
<body>
<div id='parentdiv'>
<div id='mydiv' class='mylist'>
This is poftut.com
<button>ABC</button>
</div>
<div id='mydiv'>
This is poftut.com
<button>ABC</button>
</div>
<div>
</body>
</html>