HTML - <div> Tag

Quiz

The HTML <div> tag is used to define sections in web pages. Developers use this tag to group HTML elements, allowing them to apply CSS styles to multiple <div> elements continuously. The <div> elements should only be used when no other semantic elements, such as <article> or <nav>, are appropriate.

Syntax

The below syntax of the HTML <div> tag −

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

Attributes

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

Example: Basic Usage

The following example demonstrates how you can use a HTML <div> tag inside an HTML document. This HTML code shows grouping a heading and two paragraphs within a section of a webpage using the <div> tag.

<!DOCTYPE html>
<html>
  <head>
    <title>Example of div Tag</title>
  </head>
  
  <body>
    <h1>Example of div Tag</h1>
    
	<div>
      <h3>Heading inside div tag.</h3>
      <p>Paragraph inside div tag.</p>
      <p>Another paragraph inside div tag.</p>
    </div>
  
  </body>
</html>

In the above example, we placed one h3 tag and two p tags inside a div tag to create a separate division or section for these three elements.

Example: Multiple Divisions

Whenever you want to create a new section or division, you can use the <div> tag multiple times. In the following example, we use the<div> tag to define two sections in an 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>

Example: Nested <div> Tags

The <div> tags can be placed inside another <div> tag to create nested sections or divisions. In the following example, we create a nested <div> section using the <div> tag:

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

Example: Styling div Tags with CSS

You can use the various CSS properties on div tags to change their appearance and layout, such as background colors, font sizes, padding and margins. A single CSS class can be applied to all div tags to give them a similar appearance or you can create different classes to give them a different appearance. In the following example, we use four different div tags and style them with separate CSS classes.

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

Example: Creating Form inside div Tag

In the following example, we use four different <div> tags and style them with separate CSS classes. Let's look at the example where we create a section for the form using the <div>. Then, we create 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>

Advantages of using div Tag

There are several advantages to using div tags when creating an HTML document:

Grouping elements: The div tag is very useful for grouping multiple elements inside a container, allowing you to apply CSS properties to all child elements to give them a uniform appearance.
Separation of sections: Using div tags allows you to separate different sections of a webpage, making the code easier to write and maintain the code easily.
Reusable structure: You can use the same HTML structure created with the div tags and CSS. This will reduce complexity and code size.

Supported Browsers

Tag
div	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page