You can think of a web page in three major chunks. You’ve got the header and footer and, in between, the main body. But when looking at any web page, you can see the body is made up of sections, too. There’s likely a section for products and services, testimonials, team members, contact information, and more.

Each of these sections probably looks a little different. Maybe they have different colors and fonts. Maybe one has a parallax background and one has a video background. Maybe one is made up of multiple rows and columns, and so on.

This variation in styling is possible because of the content division element in HTML. Better known as “div,” this element can divide your web page into sections so you can target them with unique CSS properties.

Free Intro Guide to HTML & CSS [Download Now]

In this post, we’ll take a closer look at what this element is, what it does exactly, and why you’d want to use it on your own site.

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 elements. You should always use a semantic element over a div when possible.

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 (in line — 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.

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:

 

 

   <body>

<h1>What does the div element do?</h1>

<div>

  <h2>This is a heading in a div element</h2>

  <p>This is some text in a div element.</p>

</div>

<p>This is some text outside the div element. Notice how it looks the same as the other paragraph.</p>

</body>

 

Here’s the result on the front end:

Unstyled div demo

Image Source

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.

Let’s start with the easiest example. To change the language of a 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:

 

 

   <body>

<h1>What does the div element do?</h1>

<div lang="fr">

  <h2>This is a heading in a div element</h2>

  <p>This is some text in a div element.</p>

</div>

<p>This is some text outside the div element. Notice how it looks the same as the other paragraph.</p>

</body>



This would only change the language of the heading and paragraph inside the div. The elements outside the div would remain as the default language.

You’ll start in the same way to change the style of the div, 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.

Let’s look at an example of when you’d use a div to change the appearance of a section of your web page. 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.

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:

 

 

   .myDiv {

  border: 5px outset #660066;

  background-color: #888888;    

  text-align: center;

  color: #FFFFFF;

}

Here’s the HTML:

 

 

   <body>

<h1>What does the div element do?</h1>

<div class="myDiv">

  <h2>This is a heading in a div element</h2>

  <p>This is some text in a div element.</p>

</div>

<p>This is some text outside the div element. Like the first heading outside the div element, this paragraph is unstyled.</p>

</body>



Here’s the result on the front end:

Styled div demo with gray background and purple border

Image Source

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. You can find this example and many others in the post Here's the Difference Between Flexbox, CSS Grid, & Bootstrap.

Say, I want to create a flexbox grid with six columns. I’d start by creating six <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:

 

 

   <body>

<h1>Flexbox Container</h1>

<p>Notice how the flex items shrink and expand as the browser is resized, but do not fill the entire container once the viewport exands beyond a particular point.</p>

<div class="flex-container">

  <div>1</div>

  <div>2</div>

  <div>3</div>

  <div>4</div>

  <div>5</div>

  <div>6</div>

</div>

</body>



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:

 

 

   .flex-container {

  display: flex;

  height: 250px;

  background-color: gray;

}

.flex-container > div {

  background-color: #f1f1f1;

  width: 100px;

  margin: 10px;

  text-align: center;

  line-height: 60px;

  font-size: 48px;

}

 

 

Here’s the result:

Styled div creates a flexbox container

Image Source

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.

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.

 

 

   <div class="myDiv">

  <h2>This is a heading in a div element</h2>

  <p>This is some text in a div element.</p>

</div>



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.

New Call-to-action

 css introduction

Originally published Sep 7, 2020 7:00:00 AM, updated September 07 2020

Topics:

HTML