Div Element in HTML
The div element (short for division) is a rectangular block-level element that defines a division or a section in an HTML document.
In simple words, the div element is used to divide an HTML document into sections. It is a basically content division element that acts as a container used for grouping other HTML elements.
Since a div is a block element by default, therefor it occupies 100 percent of the available width of the browser window and adds line breaks before and after. This means that a div element will start on its own line and push subsequent elements down to the next line.
If we try to add one more div element, it will be pushed to the next line, even though there appears to be enough space for it to fit next to the second <div> element.
Basic Syntax to Use Div Tag in HTML
The syntax to use <div> element in HTML is straightforward. It includes an opening tag <div> and a closing tag </div>. These tags define the start and the end of the <div> element, respectively. Anything that goes between these tags is considered part of the <div> element.
Here’s the basic syntax for a <div> element:
<div>
<!-- Content goes here -->
</div>
Example 1:
<!DOCTYPE html>
<html>
<body>
<div>
<p>This is a paragraph inside a div.</p>
</div>
</body>
</html>
In this example, we have added a paragraph element <p> with some text in between the opening and closing <div> tags.
Output:
As you can see in the output, a div element is not visible on the webpage. This is because an HTML div element is only visible on the webpage when we color its border or background using <style> property of CSS. Let’s take an example based on it.
Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph inside a div.</p>
</div>
</body>
</html>
Output:
Now you can view a red color of div element. It has taken up the full horizontal space available of the browser window.
HTML <div> Element as a Container
We often use an HTML <div> element as a container to group together sections of a web page. It is one of the most common elements in HTML for organizing and structuring content because it acts as a generic box that can hold other elements. The <div> tag allows us to create sections or groups of content that can be styled independently or collectively with CSS.
Example 3:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:green;
color:white;
}
</style>
</head>
<body>
<h2>HTML Div Example</h2>
<div>
<h2>Dhanbad</h2>
<p>Dhanbad is a city located in the state of Jharkhand, India</p>
<p>It is also known as the coal capital of India.</p>
</div>
<p>The green background is added to show the footprint of the div element.</p>
</body>
</html>
Output:
Nesting of Div Tags in HTML
We can also put <div> containers inside <div> containers. When we place one <div> tag inside another <div> tag, it is called nesting of div tags or elements in HTML. Each <div> tag can contain other HTML elements, including more than one <div> tags.
It is useful when you want to create a complex web page layout where different sections require different styling or functionality. Let’s take an example of it.
Example 4:
<!DOCTYPE html>
<html>
<head>
<style>
.outer_container {
background-color: green;
width: 250px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
}
.inner_container {
background-color: yellow;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p>Div inside Div</p>
<div class="outer_container">
<div class="inner_container">
</div>
</div>
</body>
</html>
Output:
Multiple <div> Elements
We can have more than one <div> container on the same webpage. It is especially useful to create different sections, grouping similar elements, and applying specific styling using the CSS.
Example 5:
<!DOCTYPE html>
<html>
<head>
<title>Multiple Div Example</title>
<style>
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
.content {
background-color: lightblue;
padding: 20px;
margin-top: 5px;
}
.footer {
background-color: grey;
padding: 10px;
text-align: center;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="header">
<h2>My Website</h2>
</div>
<div class="content">
<p>This is the main area of the webpage.</p>
</div>
<div class="footer">
<p>Footer content goes here.</p>
</div>
</body>
</html>
Output:
Aligning <div> Elements Side by Side
When we build web pages, we may often need to have two or more <div> elements side by side. There are several methods to align <div> elements side by side. However, we will have to include CSS styling in all the methods. Let’s understand the most common methods:
Using Float Property
We can use the float property of CSS to align <div> tags or elements side by side. The CSS float property allows us to position and format content as well as float elements next to each other. Here is a simple example to demonstrate how the float property can be used to align two <div> elements side by side:
Example 6:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 100%;
overflow: auto;
}
.box {
float: left; /* Floats the divs to the left */
width: 33.33%; /* Each div takes up approximately one third of the container's width */
padding: 50px;
box-sizing: border-box; /* Includes padding in the width calculation */
text-align: center; /* Centers the text horizontally */
color: white; /* Sets text color to white for better visibility */
}
.box1 {
background-color: #f76c6c; /* Red background */
}
.box2 {
background-color: #4caf50; /* Green background */
}
.box3 {
background-color: #42a5f5; /* Blue background */
}
</style>
</head>
<body>
<div class="container">
<div class="box box1">Box 1 Content</div>
<div class="box box2">Box 2 Content</div>
<div class="box box3">Box 3 Content</div>
</div>
</body>
</html>
Output:
Using Inline-block
If we change the display property of <div> element from block to inline-block, the <div> elements will no longer add a line break before and after. They will sit side by side in the same line, provided there is enough space in the container.
In other words, they will display side by side instead of on top of each other. Here’s a simple example of how we can use inline-block to display <div> elements side by side:
Example 7:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
display: inline-block; /* Changes display from block to inline-block */
width: 30%; /* Sets each box to take up 30% of the container width */
height: 100px; /* Fixed height for demonstration */
margin: 1%; /* Provides a small gap between the boxes */
text-align: center; /* Centers the text horizontally */
line-height: 100px; /* Centers the text vertically */
color: white; /* Sets text color to white for better visibility */
}
.box1 {
background-color: #f76c6c; /* Red background */
}
.box2 {
background-color: #4caf50; /* Green background */
}
.box3 {
background-color: #42a5f5; /* Blue background */
}
</style>
</head>
<body>
<div class="box box1">Box 1 Content</div>
<div class="box box2">Box 2 Content</div>
<div class="box box3">Box 3 Content</div>
</body>
</html>
Output:
Using CSS Flex
The CSS Flexbox allows us to easily design a flexible and responsive layout structure without using floats and positioning. To use the CSS Flexbox model effectively, we need to wrap <div> elements with a parent <div> element. Then, we set its CSS display property to flex to make this parent <div> container as a flex container.
Here’s is a simple example how we can use CSS Flexbox to align <div> elements side by side:
Example 8:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex; /* This makes the container a flex container */
justify-content: space-around; /* Gives space around items */
align-items: center; /* Vertically centers the items in the container */
}
.flex-item {
width: 150px; /* Width of each flex item */
height: 150px; /* Height of each flex item */
background-color: #f76c6c; /* Background color */
color: white; /* Text color */
text-align: center; /* Centers text horizontally */
line-height: 100px; /* Centers text vertically */
margin: 10px; /* Adds space between flex items */
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Box 1 Content</div>
<div class="flex-item">Box 2 Content</div>
<div class="flex-item">Box 3 Content</div>
</div>
</body>
</html>
Using CSS Grid
The CSS Grid Layout is a powerful grid-based layout system that is specifically designed to handle two-dimensional layouts that involve both rows and columns. This layout model provides an easier and more robust way to design web pages without having to use floats and positioning.
Unlike CSS Flexbox, which is mainly used for a one-dimensional layout either in rows or columns, CSS Grid allows for aligning <div> elements along both rows and columns simultaneously.
To use the CSS grid method effectively, we need to wrap the <div> elements with a parent <div> element. Then, we set its CSS display property to grid to make this parent div element as a grid container and specify the width of each column. Here’s a simple example to demonstrate the use of CSS Grid to align <div> elements side by side:
Example 9:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* divides the container into three columns */
grid-gap: 10px; /* sets the gap between rows and columns */
padding: 10px;
}
.grid-item {
background-color: #f76c6c;
color: white;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Box 1</div>
<div class="grid-item">Box 2</div>
<div class="grid-item">Box 3</div>
<div class="grid-item">Box 4</div>
<div class="grid-item">Box 5</div>
<div class="grid-item">Box 6</div>
</div>
</body>
</html>
Output:
Use of HTML5 Semantic Elements Over Div Tags
Before the HTML5, div elements were extensively used to define sections or divisions within the body of a document because there were fewer options for semantically describing the structure of a web document. With the introduction of HTML5, several new semantic elements have been introduced to better describe the meaning of different sections of web pages, improving the accessibility and readability of HTML documents.
Now, semantic elements such as <header>, <footer>, <article>, <section>, <nav>, and <aside> are used to define different sections of a web page more clearly than a non-semantic <div> tag. More commonly, you should use HTML div element to structure sections of a webpage when an HTML5 element does not apply.
In this tutorial, we have explained <div> element or tag in HTML through various examples. You should use <div> tag when there is no more specific semantic element to represent a section of webpage. We hope that you will have understood the basic concept of div element and practiced all examples provided.
Happy coding!!!
