If you're venturing into website design or development, you'll likely encounter HTML divisions, or "divs", in your coding journey. These handy HTML divs allow developers to split their webpage into distinct sections, each capable of taking on unique styles through CSS.
Web pages can be considered as three primary chunks: the header, the footer, and the main body, which comprises various sections such as products, services, testimonials, team members, and more. These sections, which could feature different colors, fonts, backgrounds, or layouts, owe their versatility to the HTML 'div' element. This content division tool enables customization of each section with unique CSS properties, allowing a wide range of styling possibilities.
In this post, we’ll look at what this element is, what it does exactly, and why you’d want to use it on your own site.
What is the <div> tag in HTML?
In HTML, the <div> tag is a generic block-level container for other elements.
Let’s look at a few key terms in this definition.
First, a div is a “generic” container because it doesn’t describe the content it contains. Other elements like <nav>, <header>, <footer>, and <form> clearly describe the content they contain and are known as semantic HTML elements. You should always use a semantic element over a div when possible because it makes your code more accessible and easier to maintain.
Second, a div is a block-level container. To understand what that means, let’s compare a div to a span element, which is an inline container.
The are several key differences between a block-level and an inline container. For example, a div always starts on its own line, whereas a span stays in line (inline — get it?). A div also takes up the full width of the page, and a span does not. That means that if you have multiple divs in a row, they will appear stacked on top of each other on the front end. Spans, on the other hand, can exist side by side. The last major difference is that you can define the height and width of a div, but you can’t for a span.
Third, the elements that can be contained in a div are known more specifically as “palpable content” or “flow content.” Palpable content is basically any HTML element that contains text or embedded content, and flow content is basically any element used in the body of HTML docs. So the anchor, block quote, audio, image, paragraph, and heading elements are all considered palpable or flow content, and can be placed inside a div.
Where does a <div> tag go in HTML?
Divs go in the body section of an HTML file. This is clearly marked by <body></body> tags in an HTML file. (Note: these tags are often left out in code editors, like CodePen.)
To create a div element, you must use an opening and closing tag. You can place the elements you want to group together inside these tags. Often, these will appear indented, as shown below.
Now that we understand the definition and syntax of the div element in HTML, let's take a closer look at what it does exactly.
What does div do?
The <div> tag doesn’t technically do anything. It can help organize an HTML file into sections on the back end, but that won’t affect how those sections display on the front end. It does, however, allow these sections to be easily styled with CSS.
To style these sections with CSS, you must add a class or ID attribute to the div element. You’ll then use a CSS selector to apply unique style properties to the elements contained within the div.
Before we dive into an example with CSS, let’s first look at an example of an unstyled div element.
Here’s the HTML and result:
See the Pen XWMWmYO by Christina Perricone (@hubspot) on CodePen.
Now that you know a div element doesn’t do anything on its own, you might be wondering why you’d even use one. We’ll look at a few use cases below.
Why use div in HTML?
Most commonly, you’ll use the div element to group sections of code that you want to target with CSS. You can style them to look different from other sections on the page, or to position them differently. You can also use a div and language attribute to change the language of a particular section on the page.
Below let's take a closer look at these uses cases.
<Div> Tag Examples
The <div> tag is best used to add styling or to mark up semantics common to a group of consecutive elements. Here are some examples of styles or semantics you can add with the div element.
Example 1: <Div> Tag with Lang Attribute
Let’s start with the easiest example. Say the default language of the text on a web page is English, but a section is in another language. To mark this particular section on a web page, simply place the elements inside a div. Then, add a language attribute and set it to the language you want. For the sake of this demo, I’ll set it to French.
Here’s the HTML:
This would set the language of the heading and paragraph inside the div at once, so you don't have to set the language of each element separately. The elements outside the div would remain set to the default language (English).
Now let’s look at an example of when you’d use a div to change the appearance of a section of your web page.
Example 2: <Div> Tag with Class Attribute
To change the style of the div, you’ll start in the same way as you did above, but instead of adding a language attribute, you’ll add an ID or class attribute. You’ll then use the corresponding selector to add the CSS you want.
Say you want to style a particular heading and paragraph on the page, and leave the rest unstyled. Then you’d wrap the individual heading and paragraph in a div element and give it a classname. For the sake of this demo, we’ll use “myDiv” as the class name.
Here's the HTML:
Then in the head section of your HTML doc or in an external stylesheet, you can use the class selector .myDiv and define whatever CSS properties you want. For this demo, we’ll use the border, background color, text-align, and color properties.
Here's the CSS:
Here’s the result:
See the Pen Styled div by Christina Perricone (@hubspot) on CodePen.
Example 3: <Div> Tag as Flexbox
Now let’s look at an example of when you’d use div to change the positioning or layout of a section of your web page.
Say, I want to create a flexbox grid with seven columns. I’d start by creating seven div elements and then placing them inside another div element. I’d add the .flex-container class to this parent div.
Here’s the HTML:
Then, in the head section of my doc or in an external stylesheet, I’d use the class selector .flex-container to make the container flexible. After setting the display property to flex, I’d specify the height of the container as well as the background color. To style the flex items within the container, I’d use the selector .flex-container > div.
Here’s the CSS:
Here’s the result:
See the Pen <Div> Tag as Flexbox by Christina Perricone (@hubspot) on CodePen.
Take a look at how the flex container and items behave as the browser is resized:
You can find similar examples in the post Here's the Difference Between Flexbox, CSS Grid, & Bootstrap.
Dividing Up Your HTML
Divs are one of the most commonly used elements in HTML. While it has multiple purposes, its primary one is grouping HTML elements so you can style them with CSS. This makes the div element instrumental in customizing your website to look exactly the way you want. The best part is it’s easy to use.
