Understanding the HTML Div Element and How it Works
Introduction
Every tag in HTML has a specific purpose. The <p></p> tag is used to start and end a paragraph. The <title></title> tag marks the title of the content on a web page. The <h1></h1> tag marks a heading. However, the HTML <div> tag works differently. It is a generic tag that lets you divide complex HTML into components that you can style individually or as a group.
The HTML <div> is one of the most versatile elements used in website development. Understanding how the HTML <div> works can enhance your website development skills.
In this guide, we will be explaining what the HTML div element is and how it works.
Prerequisite
This documentation is for technical writers or software developers with intermediate knowledge of HTML and CSS. Readers should have a basic knowledge of using code editors like Visual Studio Code and web browsers like Chrome.
New to coding or writing about tech? Check out this beginner's guide to HTML documentation.
What is the HTML Div Element?
The word div in HTML is derived from the word division. HTML div is a container used to divide complex HTML syntax into easy-to-style components. When you’re building a real-world website, you need containers to group your work and lay them out on the page. The div is the perfect solution for this container problem. This is why it is used so much. You can have paragraphs, images, and other elements inside the div.
But, the div tag doesn't describe its container.
Elements contained in a <div> are referred to as "palpable content" or "flow content." Palpable content includes text or embedded content, while flow content includes any element written inside the body of an HTML document. Anchor tags, block quotes, audio, images, paragraphs, and headings are all examples of elements that are considered either palpable or flow content, and they can be nested inside a <div>.
Where Do You Write the <div> Tag in HTML?
A <div> tag should be placed inside the body section of an HTML file. The body of the HTML file is defined by the opening and closing tags <body></body>.
To create a <div> element, use the opening and closing tags like this:
<div></div>
The HTML div tag is a block-level container. To see this in action, enter the code below in your code editor and open it in Chrome. Right-click the result in Chrome and select inspect. You will notice that the block around the div stretches to the end of the page. This is what it means for the div element to be a block-level container.
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>This is a div</div>
</body>
</html>
One of the main differences between a div as a block element and an inline HTML element like the span tag is that you can set the height and width of the div element, but you can't do this for the span tag.
How does the HTML div tag work?
Technically, the div element doesn't do anything on its own. It simply helps organize your HTML code into sections without changing how these sections look on the front end. With the HTML div, you can divide complex HTML code into different sections and style each one individually.
Let's try this with some examples.
First, we'll write some HTML code inside our div and then style it with CSS.
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>
<p>
Talking Tech and AI with Google CEO Sundar Pichai!
</p>
<p>
3.4M views · 6 months ago
</p>
<p>
Marques Brownlee ✓
</p>
</div>
<p>
Talking tech and AI on the heels of Google I/O.
Also a daily driver phone reveal from Google's CEO.
Shoutout to Sundar!
</p>
<p>
Shop early for the best selection of
holiday favorites. Shop now >
</p>
</body>
</html>
Result
Let's style the div with the CSS class or ID selector
Div with CSS class selector
We are going to perform two actions here:
Add the class or id attribute inside the div.
Use the CSS class selector to style our div in a separate file or directly below our HTML code.
For better organization, I will write my CSS code in a separate file and link it to the HTML file. Check this documentation to learn more.
Below are images of the HTML and CSS code and the result.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="divtest.css">
</head>
<body>
<div class="My-divtest">
<p>
Talking Tech and AI with Google CEO Sundar Pichai!
</p>
<p>
3.4M views · 6 months ago
</p>
<p>
Marques Brownlee ✓
</p>
</div>
<p>
Talking tech and AI on the heels of Google I/O.
Also a daily driver phone reveal from Google's CEO.
Shoutout to Sundar!
</p>
<p>
Shop early for the best selection of
holiday favorites .Shop now >
</p>
</body>
</html>
.My-divtest {
background-color: lightgray ;
color: red;
font-weight: bold;
}
Result
In the example above, we use the HTML div tag to style the elements inside it. Instead of writing CSS for each paragraph, the div tag lets us target a specific section of our HTML and style it as we want.
In the next example, we will use the div tag as a Flexbox.
HTML Div as Flexbox
Here, we will use the HTML div to change the layout of our HTML content. To demonstrate this, I will create three flexbox grids with seven columns. Follow these steps to complete it:
Below the previous HTML code or in a new file, create a div tag.
Inside this div tag, create three additional div tags.
Add the flexbox container class or ID selector inside the first div.
Style the div in your CSS file (if you have a separate CSS file) or in the HTML file (if you are writing your CSS directly in the HTML file).
See below for my code and result:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="divtest.css">
</head>
<body>
<div class="My-divtest">
<p>
Talking Tech and AI with Google CEO Sundar Pichai!
</p>
<p>
3.4M views · 6 months ago
</p>
<p>
Marques Brownlee ✓
</p>
</div>
<p>
Talking tech and AI on the heels of Google I/O.
Also a daily driver phone reveal from Google's CEO.
Shoutout to Sundar!
</p>
<p>
Shop early for the best selection of
holiday favourites. <span class="shop-link">Shop now ></span>
</p>
<div class="flexbox-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
.My-divtest {
background-color: lightgray;
color: red;
font-weight: bold;
}
.flexbox-container{
display: flex;
height: 300px;
background-color: lightblue;
}
.flexbox-container div {
flex: 1 1 200px;
background-color: lightpink;
font-size: 40px;
width: 80px;
margin: 5px;
text-align: center;
line-height: 200px;
}
Result
Div as CSS Arts
Now, let's create a circle using the HTML div. For this, we'll follow these three procedures:
1. Create a div.
2. Define the div class.
3. Style in our CSS file.
<div class="circle"></div>
.circle {
display: flex;
background-color: greenyellow;
width: 200px;
height: 200px;
border-radius: 50%;
}
.circle div {
align-items: center;
justify-content: center;
height: 100px;
background-color: white;
}
Result
Note: The HTML div tag above is in the same file as our previous code. I didn't include the entire code to avoid unnecessary repetition. Check the result for a better understanding.
Also, you will notice that, unlike the previous HTML div examples, there is no content between the div tags. This is because we are creating a shape that doesn't need any text. Div tags like this are called "empty div tags."
Conclusion
So far, we have seen that the div tag is an essential element in HTML. It is useful for organizing complex HTML structures into sections that can be styled separately or together. Since the div tag doesn't impact the front-end appearance of the HTML code, we can use it to apply various CSS styles in our HTML document. The best part is, it's very easy to use.
If you find this documentation helpful, kindly like, comment, and share.
Don't forget to read my other works. You just might find many interesting information in them.
Stay happy coding, and see you in future posts 👋.