HTML Div Tag Usage Tutorial with Examples


&lt;div&gt; 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 &lt;div&gt; and &lt;/div&gt;.  We can use all of the other HTML elements inside the div element. In this part, we will provide an example which 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>

Define Div <div> ElementDefine Div

Element

 

Div Inside Styling

As like other HTML tags div tag 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 Inside Styling
Div Inside Styling

Div Styling with CSS Style Tag

We can also style a div with the style tag. We will just put 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 Styling with CSS
Div Styling with CSS

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 Attributes
Div Attributes

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>
Div Inside Div
Div Inside Div

LEARN MORE  HTML br Tag For Single Lines Break Tutorial with Examples

Leave a Comment