Mastering the HTML Div Element

Download Now: Free Intro to HTML & CSS Guide
Anna Fitzgerald
Anna Fitzgerald

Published:

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.

Site owner learning what a div is

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.

Download Now: 25 Free HTML & CSS Hacks

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.

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.

   <div class="myDiv">   <h2>This is a heading in a div element</h2>   <p>This is some text in a div element.</p> </div>

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. 

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.

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:

<article lang="en"> <p>The default language of the web page is in English. But below is a sentence in French, which is marked accordingly in the code.</p> <div lang="fr">   <p>Dans le numéro de novembre de Marie Claire, une erreur s'est glissée dans la rubrique Mode Actualités.</p> </div> <p>This is some text in English outside the div element. </p> </article>

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:

<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.</p>

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 { font-family: 'Arial'; font-weight: bold;   border: 5px outset #00A4BD;      color: #2D3E50; background-color: #EAF0F6;   text-align: center; }

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:

<code-block data-line-numbers="true"> <code-tab data-escaped="true" data-language="html" data-label="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>7</div> </div> </body> </code-tab> </code-block>

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: 200px;   background-color: #00A4BD; } .flex-container > div {   background-color: #EAF0F6;   width: 90px;   margin: 10px;   text-align: center;   line-height: 50px;   font-size: 60px;   flex: 1 1 200px; }

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:

Styled div creates a flexbox container

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.

New Call-to-action

 

Topics: HTML

Related Articles

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Learn more about HTML and CSS and how to use them to improve your website.

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

START FREE OR GET A DEMO