When starting out with web development, one of the most essential elements you’ll work with is the <div> tag. It acts like a container that groups together content or other HTML elements, helping you structure a webpage neatly. Think of it as a box that you can style, move, or fill with text, images, and other components.
Below is a simple step-by-step tutorial for students to create and style <div> tags:
Step 1: Create a Basic HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Tag Tutorial</title>
</head>
<body>
<!-- This is where we will add our divs -->
</body>
</html>
Step 2: Add a Simple <div>
<div>
Hello, I am inside a div!
</div>
This will show plain text on the screen, but right now it looks just like normal text. The magic happens when we style it.
Step 3: Styling a <div> with CSS
We can add CSS directly inside the <style> tag in the <head> section.
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
border: 2px solid blue;
margin: 10px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
This is a styled div!
</div>
</body>
Explanation of properties:
width&height: Defines the size of the div.background-color: Fills the div with color.border: Adds an outline.margin: Space outside the div.padding: Space inside the div.text-align: Centers the text inside.
Step 4: Multiple Divs for Layout
Divs are often used to build sections of a webpage, like a header, content area, and footer.
<head>
<style>
.header {
background: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
.content {
background: #f1f1f1;
padding: 20px;
margin: 10px 0;
}
.footer {
background: #333;
color: white;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">This is the Header</div>
<div class="content">This is the Content Section</div>
<div class="footer">This is the Footer</div>
</body>
Now, your webpage has a simple structure divided into sections using <div> tags!
