The Div Element: Your First Container
If you’re just starting with HTML, the <div> element is one of the first building blocks you should learn.
You can think of a <div> as a simple, invisible box that helps you organize your page. It doesn’t look fancy by itself, but it’s incredibly powerful once you know how to use it.
In this article, you’ll:
- Learn what a
<div>is and why it matters - Create your first web page using
<div>containers - Add simple styles to make your containers visible
- Practice with small, beginner-friendly examples
By the end, you’ll feel comfortable using <div> to structure and organize your own web pages.
What is a <div>?
The word div is short for division. A <div> element divides your web page into sections.
Think of a web page like a sheet of paper. A <div> is like drawing a box on that paper to group things together. You might have one box for the header, one for the main content, and another for the footer.
On its own, a <div>:
- Does not add color
- Does not change text style
- Does not show a border
It’s just a container. You can then style that container with CSS (Cascading Style Sheets) to make it look how you want.
Getting Ready: A Simple HTML File
To follow along, you only need:
- A text editor (Notepad, VS Code, Sublime Text, etc.)
- A web browser (Chrome, Firefox, Edge, Safari, etc.)
Create a new file called index.html and add this basic HTML structure:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My First Div Page</title>
</head>
<body>
<!-- We will add divs here -->
</body>
</html>
Save the file, then open it in your browser by double-clicking it. For now, you’ll just see a blank page, and that’s okay.
Example 1: Your First <div> Container
Let’s add your very first <div> inside the <body>.
<body>
<div>
Hello, I am inside a div!
</div>
</body>
What this does
<div>starts the container.Hello, I am inside a div!is the text inside that container.</div>ends the container.
If you refresh your browser, you’ll see the text, but you won’t see any visible box. The <div> is there, but we haven’t styled it yet.
Try it yourself
Change the text inside the <div> to anything you like. For example:
<div>
Welcome to my first web section!
</div>
Refresh your browser and confirm the text changed. That’s your first step into controlling what appears on the page.
Example 2: Making the <div> Visible with Simple Styles
To really understand <div>, it helps to see the container. Let’s add some CSS styling.
Update your HTML to this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My First Div Page</title>
<style>
/* Style all div elements */
div {
border: 2px solid black; /* add a black border */
padding: 10px; /* add space inside the box */
margin: 10px; /* add space outside the box */
}
</style>
</head>
<body>
<div>
This is my visible div container.
</div>
</body>
</html>
What this CSS does
border: 2px solid black;draws a 2‑pixel thick black outline around the<div>.padding: 10px;adds space between the text and the border inside the box.margin: 10px;adds space outside the box, separating it from other elements.
When you refresh the page, you’ll now see a clear box around your text. That box is your <div>.
Try it yourself
Experiment by changing the border color and size:
div {
border: 3px dashed blue; /* try dashed and blue */
padding: 15px;
margin: 20px;
}
Refresh and see how the box changes. Playing like this is one of the best ways to learn.
Example 3: Using Multiple <div>s to Structure a Page
Now that you can see a single <div>, let’s use several to structure a simple page.
Replace your <body> with this:
<body>
<!-- Header section -->
<div>
<h1>My Simple Website</h1>
<p>Welcome to my page!</p>
</div>
<!-- Main content section -->
<div>
<h2>About Me</h2>
<p>I am learning how to build websites using HTML and divs.</p>
</div>
<!-- Footer section -->
<div>
<p>© 2025 My Name</p>
</div>
</body>
With the CSS from the previous example, each <div> will appear as a separate box.
What you’ve done
You’ve just created:
- A header div with a main title
- A content div for your “About Me” section
- A footer div for copyright info
This is exactly how many real websites are structured: separate containers for different parts of the page.
Try it yourself
Add another <div> between the main content and the footer:
<!-- Extra section -->
<div>
<h2>My Hobbies</h2>
<p>I enjoy reading, coding, and playing games.</p>
</div>
Refresh and admire your growing page. Every new box you see is another <div> container you created.
Example 4: Styling Specific <div>s with Classes
Right now, all your <div>s look the same. Often, you’ll want different sections to have different styles.
To do that, you can give a <div> a class. A class is a name you assign so CSS can target that specific group of elements.
Update your HTML body like this:
<body>
<!-- Header section -->
<div class="header">
<h1>My Simple Website</h1>
<p>Welcome to my page!</p>
</div>
<!-- Main content section -->
<div class="content">
<h2>About Me</h2>
<p>I am learning how to build websites using HTML and divs.</p>
</div>
<!-- Footer section -->
<div class="footer">
<p>© 2025 My Name</p>
</div>
</body>
Now update your <style> section to:
<style>
/* General style for all divs */
div {
margin: 10px;
padding: 10px;
}
/* Special style for header */
.header {
background-color: #f0f8ff; /* light blue */
border: 2px solid #4a90e2;
}
/* Special style for content */
.content {
background-color: #f9f9f9; /* light gray */
border: 1px solid #cccccc;
}
/* Special style for footer */
.footer {
background-color: #333333; /* dark gray */
color: white; /* white text */
text-align: center; /* center the text */
}
</style>
What’s happening here
class="header"gives the first<div>the class name header.- In CSS,
.headermeans “style the element(s) with class header.” .contentand.footerwork the same way.
Now each section looks unique while still using the same basic <div> container.
Try it yourself
Create your own class and style:
- Add a new
<div class="highlight">somewhere on the page. - In CSS, add:
.highlight {
background-color: yellow;
border: 2px dashed orange;
}
Refresh and see your highlighted section. You’ve just combined HTML structure and CSS styling like a real web developer.
Common Beginner Questions
1. Do I always need to use <div>?
Not always, but it’s very common. As you learn more HTML, you’ll also use more specific elements like <header>, <main>, and <footer>. Under the hood, they behave a lot like <div>, but with clearer meaning.
2. Can I put a <div> inside another <div>?
Yes. This is called nesting. For example, a main content <div> might contain smaller <div>s for articles or sections.
3. Why doesn’t my <div> show up?
Make sure:
- Your
<div>is inside the<body>tag. - You’ve saved the file.
- You refreshed your browser.
Quick Recap and What’s Next
In this article, you:
- Learned that a
<div>is a basic container used to group content - Created your first
<div>and made it visible with borders and padding - Used multiple
<div>s to structure a simple page (header, content, footer) - Styled specific
<div>s using classes like.header,.content, and.footer
You’ve taken an important first step: you can now organize a web page into clear sections. That’s a big win, and it’s the foundation of almost every website you’ll ever build.
What’s next?
- Practice by rebuilding a simple layout you know (like a blog or a news page) using
<div>containers. - Learn more CSS to control fonts, colors, and layout.
- Explore newer HTML layout elements like
<header>,<section>, and<footer>.
For now, keep experimenting. Every small change you make and see in your browser is proof that you’re learning. Keep going—you’re already building real web pages.
