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.

Try to click the icon run button to run the following HTML code to see the output.

Example of HTML div Tag

Creating div Section using div Tag

In the following program, 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

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>

Creating Multiple Div Section

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

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