An HTML <div> is a block-level element used to group other HTML elements together. It’s often used for styling and layout purposes with CSS and can contain various other HTML elements such as text, images, links, and other nested <div> elements.
Basic Syntax
<div>
<!-- Content goes here -->
</div>
Characteristics of <div>:
Block-Level Element: Occupies the full width available and starts on a new line.
Generic Container: Can contain various other HTML elements such as text, images, links, other nested <div> elements, etc.
No Default Styling: By itself, it doesn’t apply any styles or formatting, making it a flexible tool for layout and design.
Example:
Here’s an example of how a <div> can be used to structure a simple webpage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example Div</title>
<style>
.container {
width: 100%;
background-color: lightgrey;
}
.header {
background-color: blue;
color: white;
padding: 10px;
}
.content {
padding: 20px;
}
.footer {
background-color: blue;
color: white;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
<p>This is the content area.</p>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
Explanation of the Example:
Container Div: The .container div wraps the entire content, creating a main container for the page.
Header Div: The .header div contains the header section, styled with a blue background and white text.
Content Div: The .content div holds the main content, with padding applied for spacing.
Footer Div: The .footer div contains the footer, styled similarly to the header.