HTML div Tag

The HTML <div> tag is utilized to encapsulate a substantial number of HTML elements within a single container.

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 element is commonly employed by web developers to group together HTML elements and efficiently apply CSS styles to multiple elements simultaneously. For instance, enclosing a series of paragraph elements within a div element enables the application of CSS styles uniformly, allowing for the swift implementation of font styles across all paragraphs instead of individually styling each paragraph element.

<div style="border:1px solid pink;padding:20px;font-size:20px">

<p>Welcome to our tutorial.com, Here you get tutorials on latest technologies.</p>

<p>This is second paragraph</p>

</div>

Output:

Welcome to our tutorial.com, where you can access guides on cutting-edge technologies.

This is second paragraph.

Difference between HTML div tag and span tag

HTML div example: Login Form

In this instance, we will generate a box utilizing the div element. Enclosed within the box is a login form. Now, let's examine the CSS and HTML code snippets.

CSS Code:

.loginform{

	padding:10px;

	border:1px solid pink;

	border-radius:10px;

	float:right;

	margin-top:10px;

}

.formheading{

	background-color:red;

	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="loginform">

<h3 class="formheading">Please Login</h3>

<form action="LoginServlet" method="post">

<table>

<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 colspan="2" style="text-align:center"><input class="sub" type="submit" value="login"/></td></tr>

</table>

</form>

</div>

Output:

Please Login

Supporting Browsers