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