| Introduction to HTML |
|---|
| Introduction to HTML |
|---|
| HTML Attributes |
|---|
| HTML5 Semantic Elements |
|---|
| HTML Graphics |
|---|
The ‘<div>‘ element in HTML is a versatile container used to group together other elements for styling and layout purposes. It does not inherently provide any styling or functionality but is often used in combination with CSS and JavaScript to achieve various design and interactive effects. Here are some common uses of the ‘<div>‘ element with examples:
1. Basic Usage
The ‘<div>‘ element is used to group content.
<!DOCTYPE html>
<html>
<head>
<title>Basic div Example</title>
</head>
<body>
<div>
<p>This is a paragraph inside a div.</p>
<p>This is another paragraph inside the same div.</p>
</div>
</body>
</html>
2. Styling with CSS
Using CSS, you can style the content inside the ‘<div>‘.
<!DOCTYPE html>
<html>
<head>
<title>Styled div Example</title>
<style>
.container {
background-color: lightgrey;
border: 1px solid black;
padding: 20px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<p>This is a styled div.</p>
<p>It has a background color, padding, and margin.</p>
</div>
</body>
</html>
3. Layout with Flexbox
The ‘<div>‘ element can be used to create flexible layouts with Flexbox.
<!DOCTYPE html>
<html>
<head>
<title>Flexbox div Example</title>
<style>
.flex-container {
display: flex;
justify-content: space-around;
background-color: lightblue;
}
.flex-item {
background-color: lightcoral;
padding: 20px;
margin: 10px;
width: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
</body>
</html>
4. Grid Layout
The ‘<div>‘ element can also be used to create grid layouts.
<!DOCTYPE html>
<html>
<head>
<title>Grid div Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: lightgreen;
padding: 10px;
}
.grid-item {
background-color: lightpink;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>
5. Nested Divs
Nesting ‘<div>‘ elements allows for more complex layouts.
<!DOCTYPE html>
<html>
<head>
<title>Nested div Example</title>
<style>
.outer {
background-color: lightgrey;
padding: 20px;
}
.inner {
background-color: white;
padding: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="outer">
Outer div
<div class="inner">
Inner div
</div>
</div>
</body>
</html>
These examples demonstrate the versatility and power of the ‘<div>‘ element in HTML for creating structured, styled, and interactive web content.
