HTML Div Tag
Last Updated :
10 May, 2024
The HTML <div> tag defines sections in HTML documents, serving as containers styled with CSS or controlled with JavaScript. It’s easily customized using class or id attributes and can contain various content.
Note: Browsers add line breaks before and after <div> elements by default.
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
<html>
<head>
<title>HTML Div Tag</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:
HTML Div Tag Example 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
<html>
<head>
<title>HTML Div Tag</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:
HTML Div Tag Example 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.
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="color.css">
<title>
HTML Div Tag
</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: Â Â Â Â Â
HTML Div Tag Example 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:
html
<!DOCTYPE html>
<html>
<head>
<title>HTML Div Tag</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:
HTML Div Tag Example 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.Â
html
<!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:
HTML Div Tag Example Output
Supported Browser:
Share your thoughts in the comments
Please Login to comment...