HTML Div Tag Usage Tutorial with Examples


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

Define Div <div> Element

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 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 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 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  How To Specify Host, Port and Protocol For Tcpdump?

Leave a Comment