HTML div tag also knows as the Divison tag. HTML <div> tag is very useful and used for multiple purpose. Div gives a more modular structure to the webpage and more organized. <div> tag used in HTML mostly for a division like navigation bar, text, images, header, footer, etc.
Some definitions will define <div> as a container unit that encapsulates other page elements and divides the HTML document into sections. A module approach in <div> element is to group together HTML elements and apply CSS styles to many elements at once.
![HTML div tag Class, id Align, center, top, right Width, border](https://i2.wp.com/tutorial.eyehunts.com/wp-content/uploads/2019/04/HTML-div-tag-Class-id-Align-center-top-right-Width-border.png?fit=750%2C231&ssl=1)
HTML div example
Let’s see the example of div created section with the background color is light-grey. Using an inline css to change the div color background. And div container is holding 2 elements– <h> and <p>.
<!DOCTYPE html>
<html>
<body>
<div style="background-color:lightgrey">
<h3>This is a heading</h3>
<p>This is a paragraph. A blue light is off.</p>
</div>
</body>
</html>
Output:
![HTML div example](https://i0.wp.com/tutorial.eyehunts.com//wp-content/uploads/2019/04/HTML-div-example-output.png?resize=500%2C218&ssl=1)
HTML div class | <div class=”name”>
A dive class is used to identify which div tag will change the
See example if <div class=”box”>, so “box” is identity. It used in CSS with dot prefix. (.box)
HTML div id | <div id=”name”>
Same as div class, id is used. id and class both are attributes.
For an example if <div id=”box”>, so “box” is identity. It used in CSS with hash prefix. (#box)
HTML div align Center | Top | Right
Align is an attribute of a div tag in HTML. With aligning attributes, you can set the other elements’ positions inside the <div> section.
You can set the align attribute with center, top, right values. See below example.
<!DOCTYPE html>
<html>
<body>
<div align="center" style="border:1px solid blue">
Center text in a div element!
</div>
</body>
</html>
Output:
![HTML div align Center Top Right](https://i0.wp.com/tutorial.eyehunts.com//wp-content/uploads/2019/04/HTML-div-align-Center-Top-Right.png?resize=500%2C143&ssl=1)
HTML div tag attributes
The <div> tag also supports the Global and Event Attributes in HTML.
Question: How to create an HTML div box?
Answers: To creating a box using div tag. You need to define width and border in CSS (any kind of CSS).
<!DOCTYPE html>
<html>
<head>
<style>
#box{
background-color: lightblue;
width: 200px;
border: 5px solid red;
padding: 5px;
margin: 5px;
}
</style>
</head>
<body>
<h2>Div Box</h2>
<div id="box">This text is the actual content of the box. A example of div box with a 5px border and color is red. </div>
</body>
</html>
Output:
![create an HTML div box output](https://i0.wp.com/tutorial.eyehunts.com//wp-content/uploads/2019/04/create-an-HTML-div-box-output.png?resize=500%2C271&ssl=1)
Question: How to use the div tag in HTML to divide the page?
Answers: See below example code of divide the page in three parts using div tag.
HTML
<div id="wrapper">
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</div>
CSS
div {
display: block;
}
#wrapper {
width: 400px;
height:400px;
}
#first {
float:left;
width: 33%;
height: 100%;
background: red;
}
#second {
float:left;
width: 67%;
height: 30%;
background: green;
}
#third {
float:left;
width: 67%;
height: 70%;
background: blue;
}
Question: What is Default CSS Settings of <div> tag?
Answer: Most browsers will display the <div> element with the following default values in CSS:
div {
display: block;
}
Do comment if you have any doubt and suggestion on this “HTML Division Tag” tutorial.
Note: The All Examples of HTML div tag are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version