HTML Div Tag

The HTML <div> tag is used to group the large section of HTML elements together.

We know that every tag has a specific purpose e.g. p tag is used to specify paragraph, <h1> to <h6> tag are used to specify headings but the <div> tag is just like a container unit which is used to encapsulate other page elements and divides the HTML documents into sections.

The div tag is generally used by web developers to group HTML elements together and apply CSS styles to many elements at once. For example: If you wrap a set of paragraph elements into a div element so you can take the advantage of CSS styles and apply font style to all paragraphs at once instead of coding the same style for each paragraph element.

Div Tag Usage

• The <div> tag defines a division or a section in an HTML document.
• The <div> tag is used to group block-elements to format them with CSS.

<div style="border:1px solid red;padding:20px;font-size:20px">  
<p>PHP Tutorial, Java Tutorial, Android Tutorial, Spring Tutorial, MySql Tutorial etc learning tutorial website.</p>  
<p>This is second paragraph</p>  
</div>  

Output

Difference between HTML div tag and span tag

HTML div example: Registration Form

In this example, we are creating box using div tag. There is a registration form inside the box. Let's see the CSS and HTML code.

CSS Code:

.registrationform{  
    padding:10px;  
    border:1px solid red;  
    border-radius:10px;  
    float:right;  
    margin-top:10px;  
}  
.formheading{  
    background-color:black;  
    color:white;  
    padding:4px;  
    text-align:center;  
}  
.sub{  
background-color:blue;  
padding: 7px 40px 7px 40px;  
color:white;  
font-weight:bold;  
margin-left:70px;  
border-radius:5px;  
}  

HTML Code:

<div class="registrationform">  
<h3 class="formheading">Please Register</h3>  
<form action="register.php" method="post">  
<table>  
<tr><td>Name:</td><td><input type="text" name="name"/></td></tr> 
<tr><td>Email:</td><td><input type="email" name="email"/></td></tr>  
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr><td>Confirm Password:</td><td><input type="password" name="cpassword"/></td></tr>  
<tr><td colspan="2" style="text-align:center"><input class="sub" type="submit" value="register"/></td></tr>  
</table>  
</form>  
</div>  

Output