He <div> tag in HTML stands for “division”. It is a block-level container element that is used to group together other HTML elements.
You can think of <div> as an invisible box that wraps content text, images, links, or other elements and helps structure your webpage into meaningful sections.
In short, <div> helps you organize, style, and control layouts using CSS.
Syntax
<div>
<!-- Your content here -->
</div>💡 Tip: A <div> doesn’t have any visual change by default. it becomes useful when you apply CSS styles or JavaScript to it.
Example of Basic HTML Div
<!DOCTYPE html>
<html>
<head>
<title>HTML Div Example</title>
</head>
<body>
<h2>HTML Div Example</h2>
<div>
<p>This is a simple division block.</p>
<p>You can group multiple elements inside a <div> tag.</p>
</div>
</body>
</html>Even though it looks the same visually, the browser treats both paragraphs as part of one container which you can style later using CSS.
Styling the <div> Using CSS
You can use CSS to make a <div> stand out. It helps you add colors, borders, spacing, or background images.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Styled Div Example</title>
<style>
div {
background-color: #eaf0ff;
border: 1px solid #888;
padding: 15px;
margin: 10px;
}
</style>
</head>
<body>
<h2>Styled Div Example</h2>
<div>
<p>This is a styled div container with background and border.</p>
</div>
</body>
</html>💡 Tip: You can style multiple <div> elements differently using classes or IDs.
Using class and id with <div>
The <div> tag becomes more powerful when you use class and id attributes. They help you apply CSS or JavaScript to specific divisions on a page.
Example of Using Class
<!DOCTYPE html>
<html>
<head>
<title>Div Class Example</title>
<style>
.section {
background-color: #f2f2f2;
padding: 10px;
border: 1px solid gray;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h2>Div with Class Example</h2>
<div class="section">
<h3>HTML Section</h3>
<p>This div represents the HTML section of a page.</p>
</div>
<div class="section">
<h3>CSS Section</h3>
<p>This div represents the CSS section of a page.</p>
</div>
</body>
</html>💡 Note: Use class when you want to apply the same style to multiple <div> elements.
Example of Using id
<!DOCTYPE html>
<html>
<head>
<title>Div ID Example</title>
<style>
#footer {
background-color: #ddd;
padding: 15px;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Div with ID Example</h2>
<div id="footer">
This is the footer section.
</div>
</body>
</html>💡 Tip: Use id when you want to apply style or control to one unique element only.
Nesting <div> Elements
You can place one <div> inside another <div> to create layouts or grouped sections.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Nested Div Example</title>
<style>
.outer {
background-color: #f9f9f9;
border: 2px solid #aaa;
padding: 10px;
}
.inner {
background-color: #d1f7d1;
padding: 10px;
margin-top: 5px;
}
</style>
</head>
<body>
<h2>Nested Div Example</h2>
<div class="outer">
Outer Div
<div class="inner">Inner Div 1</div>
<div class="inner">Inner Div 2</div>
</div>
</body>
</html>💡 Use Case: Nested <div> are used to create multi-column layouts, forms, and web app sections.
Div as a Layout Container
In modern web design, <div> is widely used to create page layouts like headers, sidebars, content areas, and footers.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Div Layout Example</title>
<style>
.header {
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: center;
}
.menu {
background-color: #f4f4f4;
width: 25%;
float: left;
padding: 15px;
}
.content {
width: 70%;
float: right;
padding: 15px;
}
.footer {
clear: both;
background-color: #ddd;
text-align: center;
padding: 10px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="header">
<h2>Website Header</h2>
</div>
<div class="menu">
<h3>Menu</h3>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="content">
<h3>Content Section</h3>
<p>This is the main content area of the webpage.</p>
</div>
<div class="footer">
<p>Website Footer © 2025</p>
</div>
</body>
</html>💡 Pro Tip: In modern design, you can also use Flexbox or CSS Grid with <div> for responsive layouts.