HTML - <div> Tag

HTML <div> tag is used to define sections in web pages. This tag is used by developers to group HTML elements, and we can apply CSS styles to multiple div elements at once. The <div> element should only be used when no other semantic element such as <article> or <nav> is appropriate.

Syntax

<div>
    .....
</div>

Attributes

HTML div tag accept all HTML Global Attributes and Event Attributes.

Creating div section

HTML <div> tag is used to create divisions in html, division are created to keep things in particular sections to devide a webpage into maltiple pasrts.

Example

In the following example, we are using the HTML <div> tag to define two div section in html document.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML div tag</title>
</head>
<body>
   <h3>HTML div tag Example</h3>
   <!-- Using HTML div tag -->
   <div>
       This is div tag 1
   </div>
   <div>
       This a div tag 2
   </div>
</body>

Nested div section

We can create division inside of division that will be nested divisions. We can use HTML <div> tag to create nested div section.

Example

Here, we are creating the nested div section using <div> tag into to the HTML documents.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML div tag</title>
   <style>
      /* using CSS to increase the visibility of divs */
      div {
         border: 2px solid black;
         padding: 4px;
      }
   </style>
</head>
<body>
   <h3>HTML div Tag Example</h3>
   <!-- Using HTML div tag -->
   <div>Outer 
       <div>Inner 
        <div>Inner1</div>
      </div>
   </div>
</body>
</html>

Multiple div section

We can create multiple division in single webpage based on our requirements, by using HTML <div> tag we can do that as well.

Example

In this example, we are dividing the HTML documents into multiple sections using HTML <div> tag. We are using CSS to style the sections we have created.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML div tag</title>
   <style>
      .first {
         width: 100px;
         height: 100px;
         background-color: rgb(4, 109, 109);
         text-align: center;
         display: grid;
         place-items: center;
         float: left;
      }

      .second {
         width: 100px;
         height: 100px;
         background-color: rgb(17, 92, 222);
         text-align: center;
         display: grid;
         place-items: center;
         float: left;
      }

      .third {
         width: 100px;
         height: 100px;
         background-color: rgb(82, 40, 180);
         text-align: center;
         display: grid;
         place-items: center;
         float: left;
      }

      .fourth {
         width: 100px;
         height: 100px;
         background-color: rgb(157, 17, 222);
         text-align: center;
         display: grid;
         place-items: center;
         float: left;
      }

      div {
         border-radius: 10px;
         margin: 10px 10px;
      }

      div p {
         color: white;
      }
   </style>
</head>
<body>
   <h3>HTML div Tag Example</h3>
   <!-- Using HTML div tag -->
   <div class="first">
      <p>First</p>
   </div>
   <div class="second">
      <p>Second</p>
   </div>
   <div class="third">
      <p>Third</p>
   </div>
   <div class="fourth">
      <p>Fourth</p>
   </div>
</body>
</html>

Form in a div section

We can place any component in a div tag to wrap that component, here we are placing a form inside an HTML <div> tag.

Example

Let's look at the following example, where we are going to creating a section for the form using the <div> tag. Then, we are creating another section for the input fields and a button within the form to split the fields into separate sections.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML div tag</title>
   <style>
      .myForm {
         width: 300px;
         height: 250px;
         background-color: green;
         border-radius: 10px;
      }

      .myForm h2 {
         text-align: center;
         position: relative;
         top: 10px;
         color: white;
         font-family: sans-serif;
      }

      .myForm .fields input {
         position: relative;
         top: 20px;
         border-radius: 5px;
         width: 80%;
         margin: 20px auto;
         display: flex;
         padding: 10px;
      }

      .myForm button {
         width: 100px;
         position: relative;
         top: 10px;
         left: 20px;
         padding: 10px;
         border-radius: 5px;
      }
   </style>
</head>
<body>
   <h3>HTML div Tag Example</h3>
   <p>
       Here we have placed a form inside a div, 
       div is playing the role of wrper for the form.
   </p>
   <!--div tag-->
   <div class="myForm">
      <h2>Login</h2>
      <form>
      <!--div tag-->
      <div class="fields">
         <input type="text" placeholder="Username">
         <input type="password" placeholder="password">
         <br>
         <button>Login</button>
      </div>
      </form>
   </div>
</body>
</html>

Supported Browsers

Tag
div	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm