The <div> tag is known as the 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>) tags and it is mandatory to close the tag.
The Div is the most usable tag in web development because it helps us to separate data in the web page and we can create a particular section for particular data or function in the web pages.
Div tag Usage:
- The div tag is the block-level tag.
-
It is used for applying styles and layout structure
<div>and allows us to manipulate and position content through CSS. - It also divides content into logical sections, aiding in the readability and maintainability of the code.
- As we know a Div tag is a block-level tag, the div tag contains the entire width. Hence, every div tag will start from a new line and not the same line.
Example 1:
In this example, we will see the implementation div tag with an example.
<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:
Output
Example 2:
In this 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)
<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:
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.
Example :
This is the example with respect to above approach by using class.
<!DOCTYPE html><html>
<head>
<link rel="stylesheet" href="color.css">
<title>
gfg
</title>
</head>
<body>
<center>
<div class="color">
<!--open tag of Div!-->
<caption>
<h1>GEEKSFORGEEKS</h1>
</caption>
<h1>Inline CSS is not USED in THIS method.
</h1>
</div>
<!--closing tag of Div!-->
</center>
</body>
</html>
|
.color { height: 400px;
width: 600px;
border: 1px solid;
background-color: 009900;
} |
Output:
Output
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.
Example:
<!DOCTYPE html><html>
<head>
<title>
gfg
</title>
</head>
<body>
<center>
<div style="height:300px; width:500px; color:white;
border:1px solid; background-color: 009900;">
<!--open tag of Div!-->
<caption>
<h1>GEEKSFORGEEKS</h1>
</caption>
<h1>Inline CSS is USED in THIS method.
In this div no class is used.
</h1>
</div>
<!--closing tag of Div!-->
</center>
</body>
</html>
|
Output:
Output
Difference Between div tag and span tag
| 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.
Example:
This 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.
<!DOCTYPE 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>
<!-- 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>
</body>
</html>
|
Output:
Output
Supported Browser:
Output
- Google Chrome 1 and above
- Microsoft Edge 12 and above
- Firefox 1 and above
- Opera 15 and above
- Safari 1 and above
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.