The div tag is known as Division tag. The div tag is used 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>) tag and it is mandatory to close the tag. The 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 function in the web pages.
- Div tag is Block level tag
- It is a generic container tag
- It is used to group various tags of HTML so that sections can be created and styles can be applied to them.
As we know Div tag is block-level tag, the div tag contains entire width. Hence, every div tag will start from a new line, and not the same line.
Example 1:
html
<html>
<head>
<title>gfg</title>
<style type=text/css>
p{
background-color:gray;
margin: 10px;
}
div
{
color: white;
background-color: 009900;
margin: 2px;
font-size: 25px;
}
</style>
</head>
<body>
<div > div tag </div>
<div > div tag </div>
<div > div tag </div>
<div > div tag </div>
</body>
</html>
|
Output:
As we know, div tag is used for grouping HTML elements together and to apply CSS and create web layouts using it. In the below example we don’t use div tag and hence we need to apply CSS for each tag (in the example using H1 H2 and two paragraphs p tags)
Example 2:
html
<html>
<head>
<title>gfg</title>
<style type=text/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;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>How many times were you frustrated while looking out
for a good collection of programming/algorithm/interview
questions? What did you expect and what did you get?
This portal has been created to provide well written,
well thought and well-explained solutions for selected
questions.
</p>
<h2>GeeksforGeeks</h2>
<p>GCET is an entrance test for the extensive classroom
program by GeeksforGeeks to build and enhance Data
Structures and Algorithm concepts, mentored by Sandeep
Jain (Founder & CEO, GeeksforGeeks).He has 7 years of
teaching experience and 6 years of industry experience.
</p>
</body>
</html>
|
Output:
Creating Web Layout using Div Tag The div tag is a container tag. Inside div tag, we can put more than one HTML element and can group them together and apply CSS for them. Div tag can be used for creating a layout of web pages. In the below example we had created a web layout using the div tag. We can also create web layouts using table tag but table tags are very complex to modify the layout. The div tag is very flexible in creating web layouts and easy to modify. The below example will show grouping of HTML element using div tag and create block-wise web layout.
Example:
html
<html>
<head>
<title>gfg</title>
<style type=text/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;
}
</style>
</head>
<body>
<div class="leftdiv">
<h1>GeeksforGeeks</h1>
<p>How many times were you frustrated while looking out
for a good collection of programming/algorithm/interview
questions? What did you expect and what did you get?
This portal has been created to provide well written,
well thought and well-explained solutions for selected
questions.
</p>
<h2>GeeksforGeeks</h2>
<p>GCET is an entrance test for the extensive classroom
programme by GeeksforGeeks to build and enhance Data
Structures and Algorithm concepts, mentored by Sandeep
Jain (Founder & CEO, GeeksforGeeks).He has 7 years of
teaching experience and 6 years of industry experience.
</p>
</div>
<div class="middlediv">
<h1>GeeksforGeeks</h1>
<p>How many times were you frustrated while looking out
for a good collection of programming/algorithm/interview
questions? What did you expect and what did you get?
This portal has been created to provide well written,
well thought and well-explained solutions for selected
questions.
</p>
<h2>GeeksforGeeks</h2>
<p>GCET is an entrance test for the extensive classroom
programme by GeeksforGeeks to build and enhance Data
Structures and Algorithm concepts, mentored by Sandeep
Jain (Founder & CEO, GeeksforGeeks).He has 7 years of
teaching experience and 6 years of industry experience.
</p>
</div>
<div class="rightdiv">
<h1>GeeksforGeeks</h1>
<p>How many times were you frustrated while looking out
for a good collection of programming/algorithm/interview
questions? What did you expect and what did you get?
This portal has been created to provide well written,
well thought and well-explained solutions for selected
questions.
</p>
<h2>GeeksforGeeks</h2>
<p>How many times were you frustrated while looking out
for a good collection of programming/algorithm/interview
questions? What did you expect and what did you get?
This portal has been created to provide well written,
well thought and well-explained solutions for selected
questions.
</p>
</div>
</body>
</html>
|
Using Div tag we can cover the gap between the heading tag and the paragraph tag. This example will display a web layout with three blocks.
Output:
We can use CSS in any of the divisions (<div> tag) using the following methods:
1. Using class: We can use class on that particular div and apply CSS either inside a <style> tag or linking an external CSS file.
- In case of internal CSS: We need to define Class in the <head> section of HTML within <style> element.
- In case of External CSS: We need to create a separate .css file and include it in HTML code inside <head> section using <link> element.
- Code:
html
<html>
<head>
<link rel="stylesheet" href="color.css">
<title>
gfg
</title>
</head>
<body>
<center>
<div class="color">
<caption>
<h1>GEEKSFORGEEKS</h1>
</caption>
<h1>Inline CSS is not USED in THIS method.
</h1>
</div>
</center>
</body>
</html>
|
- CSS for color class: File name color.css
html
.color
{
height:400px;
width:600px;
border:1px solid;
background-color: 009900;
}
|
2. Inline CSS: We can directly use CSS in div also. This method does not require class. Div in HTML coding is used as a container tag also because it is the one that can contain all other tags.
html
<html>
<head>
<title>
gfg
</title>
</head>
<body>
<center>
<div style="height:300px; width:500px; color:white;
border:1px solid; background-color: 009900;">
<caption>
<h1>GEEKSFORGEEKS</h1>
</caption>
<h1>Inline CSS is USED in THIS method.
In this div no class is used.
</h1>
</div>
</center>
</body>
</html>
|
Difference Between div tag and span tag
The div and span tags are two commonly used tags when creating pages using HTML and performs different functionality. While div tag is a block level element and span is an inline element The div tag 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.
| Properties |
Div Tag |
Span Tag |
| Elements Types |
Block-Level |
Inline |
| Space/Width |
Contain Whole Width Available |
Takes only required Width |
| Examples |
Headings, Paragraph, form |
Attribute, image |
| Uses |
Web-layout |
container for some text |
| Attributes |
Not required,with common css, class |
Not required,with common css, class |
The span tag does not create a line break similar to a div tag, but rather allows the user to separate things from other elements around them on a page within the same line. avoiding of line break, results only that selected text to change, keeping all the other elements around them same. Below example will display the difference between span and div tag while div tag contains whole width and span tag contain only required width and rest parts are free for another element.
html
<html>
<head>
<title>gfg</title>
<style type=text/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;
}
</style>
</head>
<body>
<div > div tag </div>
<div > div tag </div>
<div > div tag </div>
<div > div tag </div>
<span>span-tag</span>
<span>span-tag</span>
<span>span-tag</span>
<span>span-tag</span>
</body>
</html>
|
Output:
Supported Browser: The browser supported by <div> tag are listed below:
- Google Chrome
- Edge 12
- Internet Explorer
- Firefox 1
- Opera
- Safari
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
17 Feb, 2023
Like Article
Save Article