The <div> tag can also be used to divide an HTML page into multiple sections. This write-up aims to guide you how div tags can be used to divide the page. The following outcomes are expected:
- How do we use div tags to divide HTML pages in horizontal sections?
- How do we use div tags to divide HTML pages in vertical sections?
How do we Use Div Tag to Divide HTML Page in Horizontal Sections?
In HTML, a <div> tag act as a section for the data in the HTML page. To divide a page into sections, you need to write the required HTML tags inside the <div> tag. Let’s see the practical example below to understand the division of HTML pages by <div> tag.
HTML
<html lang="en">
<head>
<title>First Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 style="color:crimson; text-align:center;">Dividing HTML Page by using <div> Tag</h1>
<div class="one">Section 1</div>
<div class="two">Section 2</div>
<div class="three">Section 3</div>
</body>
</html>
In this code, we have used three <div> tags. These <div> tags are associated with the three CSS classes. The CSS code used in the above HTML code is provided below:
CSS
{
text-align: center;
font-size: 30px;
color: white;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
height: 150px;
width:98%;
}
.one
{
background-color:limegreen;
}
.two
{
background-color:orange;
}
.three
{
background-color: hotpink;
}
In the CSS part, we have targeted all three <div> tags to format the content of all the divs. To give different colors to each div, three classes “one”, “two”, and “three” are created.
Output
The output shows that a web page is divided into three sections using HTML <div> tag.
How do we use Div Tag to Divide HTML Page in Vertical Sections?
In HTML, we can use <div> tag to divide a web page into vertical sections. Let’s see the practical example below to understand the vertical division of an HTML page by using <div> tag.
HTML
<html lang="en">
<head>
<title>First Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 style="color:crimson; text-align:center;">Dividing HTML Page by using <div> Tag</h1>
<div class="one">Section 1</div>
<div class="two">Section 2</div>
<div class="three">Section 3</div>
</body>
</html>
In this code, we have created three sections using <div> tag. For better presentation, we have applied the following CSS on the div tags:
CSS
{
text-align: center;
font-size: 30px;
color: white;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
height: 500px;
width:30%;
}
.one
{
background-color:limegreen;
float: left;
}
.two
{
background-color:orange;
float: left;
}
.three
{
background-color: hotpink;
float: left;
}
In the CSS part we target all the divs and used different properties to give the height, width, padding and background font size to the div content. It is observed that the vertical sections are created with the help of float property of CSS and its value is set to left.
Output
The output shows that a web page is divided into three sections using HTML <div> tag.
Conclusion
In HTML, we can divide a whole webpage into sections by using <div> tag along with the CSS. By default, a <div> tag divides a webpage into horizontal sections. However, you can use the float property of CSS to make the vertical sections of the webpage. By following this guide, you can apply <div> tag to divide the HTML page.
