Contents
The div tag is known as division content on-page. Use the division in HTML to make divisions of content in the web page like (text, images, header, footer, navigation bar, etc). Div tag has both open(<div>) and closing (</div>) and it is mandatory to close the tag. How to use div tag in HTML to divide the page. The HTML Div is the most usable tag in web development because it helps us to separate out data in the web page and we can create a particular section for particular data or functionality in the web pages.
- Div is Block level tag
- It is a generic container tag
- It is used to the group of various tags of HTML so that sections can be created and style can be applied to them.
As we know Div is block-level tag in this example div contain entire width. Use It will be displayed div tag each time on a new line, not on the same line. How to use div tag in HTML to divide the page?
Example:
HTML
<div> div tag </div>
<div> div tag </div>CSS
div {
color: white;
background-color: #009900;
margin: 2px;
font-size: 25px;
}Output:
As we know division is used for grouping HTML elements together and is to apply CSS and web page on them Lets see the below example without using division. we need to applying CSS for each tag (in the example using H1 H2 and two paragraphs p tags)
Example:
HTML
<h1>PennedWeb.com</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos nisi, atque doloribus, tenetur consequuntur esse exercitationem nesciunt laboriosam id laudantium natus sed excepturi aspernatur illum ex tempora molestiae qui facilis.
</p>
<h2>PennedWeb</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos nisi, atque doloribus, tenetur consequuntur esse exercitationem nesciunt laboriosam id laudantium natus sed excepturi aspernatur illum ex tempora molestiae qui facilis.
</p>CSS
p {
color: white;
background-color: #009900;
width: 400px;
}
h1 {
color: white;
background-color: #009900;
width: 400px;
}
h2 {
color: white;
background-color: #009900;
width: 400px;
} Output:
Please, watch the video instruction
How do you use division tag in HTML? Or how to use div tag in HTML to divide the page?
Creating Web Layout using Div Tag. The HTML div is a container tag inside division we can put more than one HTML element and can group together and can apply CSS for them. Div can be used for creating a layout of web pages in the below examples shows creating a web layout. We can also create a web layout using tables tag but table tags are very complex to modify the content. How to use div tag in HTML to divide the page?
The div is very flexible in creating web layouts and easy to modify content. in below example will show the grouping of HTML elements using div and create block-wise web layout.
Example:
HTML
<div class="leftdiv">
<h1>PennedWeb</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos nisi, atque doloribus, tenetur consequuntur esse exercitationem nesciunt laboriosam id laudantium natus sed excepturi aspernatur illum ex tempora molestiae qui facilis.
</p>
<h2>PennedWeb.com</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos nisi, atque doloribus, tenetur consequuntur esse exercitationem nesciunt laboriosam id laudantium natus sed excepturi aspernatur illum ex tempora molestiae qui facilis.
</p>
</div>
<div class="middlediv">
<h1>PennedWeb</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos nisi, atque doloribus, tenetur consequuntur esse exercitationem nesciunt laboriosam id laudantium natus sed excepturi aspernatur illum ex tempora molestiae qui facilis.
</p>
<h2>PennedWeb.com</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos nisi, atque doloribus, tenetur consequuntur esse exercitationem nesciunt laboriosam id laudantium natus sed excepturi aspernatur illum ex tempora molestiae qui facilis.
</p>
</div>
<div class="rightdiv">
<h1>PennedWeb</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos nisi, atque doloribus, tenetur consequuntur esse exercitationem nesciunt laboriosam id laudantium natus sed excepturi aspernatur illum ex tempora molestiae qui facilis.
</p>
<h2>PennedWeb.com</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos nisi, atque doloribus, tenetur consequuntur esse exercitationem nesciunt laboriosam id laudantium natus sed excepturi aspernatur illum ex tempora molestiae qui facilis.
</p>
</div>CSS
.leftdiv{
float: left;
}
.middlediv {
float: left;
background-color:gray
}
.rightdiv {
float: left;
}
div{
padding : 1%;
color: white;
background-color: 009900;
width: 30%;
border: solid black;
}Using HTML Div tag we can cover gap between heading tag and paragraph in this example will display three blocks web layout.
Output:
We can use CSS in any divisions using the following methods:
Using class
We can use Class on that particular HTML div body either in internal CSS or external CSS. How to use div tag in HTML to divide the page?
- In case of internal CSS: we need to define Class in the <head> section of HTML within <style> layout.
- In case of External CSS: we need to create a separate .css file and include it in HTML code in <head> section using <link> element.
- The class name should be different from other class names in other div styles otherwise the CSS used in one div can affect another division.
Example:
HTML
<head>
<link rel="stylesheet" href="color.css" />
</head>
<body>
<center>
<div class="color">
<!--open tag of Div!-->
<caption>
<h1>pennedweb.com</h1>
</caption>
<h1>
rights reserved
</h1>
</div>
<!--closing tag of Div!-->
</center>
</body>CSS for color class: File name color.css
CSS
.color{
height:400px;
width:600px;
border:1px solid;
background-color: #009900;
}In this example, we used a class to that particular Div content. With name color.css(style width, height and ower) which properties of div. It is a separate file which is linked by link tag in this HTML code. How to use div tag in HTML to divide the page?
Output:
Inline CSS
We can directly use CSS in div also this method does not require of CLASS. Div in HTML coding is used as a container tag also because it is the one that can contain all other tags.
Example:
HTML
<body>
<center>
<div style="height:300px; width:500px; color:white; border:1px solid; background-color: #009900;">
<!--open tag of Div!-->
<caption>
<h1>Pennedweb.com</h1>
</caption>
<h1>rights reserved</h1>
</div>
<!--closing tag of Div!-->
</center>
</body> In this method, we applying inline CSS in the div (style width, height, and over ). By using style attribute this style will apply to that particular div content. How to use div tag in HTML to divide the page?
Output:
Difference Between Div and Span
The div and span are two common tags when creating pages using HTML and perform different functions on them while div tag is a block-level element and span is an inline element. How to use div tag in HTML to divide the page? The div creates a line break and by default creates a division between the text that comes after the tag as begun and until the tag ends with </div>. div tag creates separate boxes or containers for all elements inside this tag like text, images, paragraphs.
Below example will display the difference between span and div tag while you use div tag contains whole width and span tag contain only required width and rest parts are free for another element.
Code:
HTML
<!-- below some div tags -->
<div> div tag </div>
<div> div tag </div>
<div> div tag </div>
<div> div tag </div>
<!-- below some span tags -->
<span>span-tag</span>
<span>span-tag</span>
<span>span-tag</span>
<span>span-tag</span> CSS
p {
background-color:gray;
margin: 10px;
}
div {
color: white;
background-color: #009900;
margin: 2px;
font-size: 25px;
}
span {
color: black;
background-color: gray;
margin: 5px;
font-size: 25px;
} Output:
See the Pen How to use div tag in HTML to divide the page by Alexander (@Pennedweb) on CodePen.
Supported Browser: The browser supported content by <div> tag are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Just for fun, watch funny cats compilation
