How To Use Div Tag In HTML To Divide The Page
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Ashish
In this tutorial we will show you the solution of how to use div tag in HTML to divide the page, all of us know that every element in html, acts like an element.
As like others, the div elements is different and it cover the full line of website it not matters weather the content or text is short or long, but here our concept is to divide the page into two portions.
So, here in this article we covers how to divide page vertically as well as horizontally using div tags.
Step By Step Guide On How To Use Div Tag In HTML To Divide The Page :-
As, div tags covers full line. So, we first create two div tags with some height and in first we use two more division tags to page vertically and in second tag, we use two other division tags to show you how to divide the page horizontally.
You can also use more than two division vertically and horizontally to make more than two sections of page or screen.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
</head>
<body>
<div style="height: 350px;width: 100%;">
<div style="background-color: blue; height: 350px; width: 50%;float: left;">
div one
</div>
<div style="background-color: red; height: 350px; width: 50%;float: left;">
div two
</div>
</div>
<div style="height: 400px; width: 100%;">
<div style="background-color: green;height: 200px; width: 100%;">
div three
</div>
<div style="background-color: yellow;height: 200px; width: 100%;">
div four
</div>
</div>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. In the body tag, we create six division.
- First we create two divisions and in both of them two more divisions, as a result the division that are created under a particular div, occupies the area and covers the division the under this known as parent div.
- In code we use different background colors to show you the area that a particular division covers.
- In first div, two more div are created with half the width of parent div and to divide the page vertically whereas in other section of div, we create div with half the height of parent div to divide the page horizontally.
- You are able to customize the height and width according to your choice.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, we can say with the help of this article we are able to divide the html page vertically and horizontally.
This is only done with the help of height and width concept with parent division.
In further session we will also help you to make a creative webpage with the help of division tags only that divide the page vertically and horizontally.
I hope this tutorial on how to use div tag in HTML to divide the page helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
