Understanding the DIV element in HTML and How it Works

Introduction

Every tag in HTML has a specific function. The <p></p> tag is used to mark the beginning and end of a paragraph. The <title></title> marks the title of the content on a web page. The <hi></hi> marks the heading of the content on the webpage. However, the HTML div tag doesn't function this way. Rather it is a generic tag that allows you to split complex HTML syntax into components that you can style individually or in a group.

HTML div is one of the most versatile HTML elements used in website development. As such, understanding the HTML div is important to enhance your website development knowledge.

In this article, 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 the code editor "Visual Studio Code or VS Code" and Chrome as a web browser to view HTML and CSS code.

Note: This is not a tutorial on using the div element in HTML, rather, it is a guide explaining the HTML div and how it works. This knowledge will help you as you progress in your knowledge of HTML and CSS.

New to coding or writing about tech? Check out this beginner's guide to HTML documentation.

Understanding the DIV Element

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. An easy way to understand this is that the HTML div is just a box that contains other HTML elements.

In other to build a complex, real-world website, we need containers to group our work together and lay them out on the page. The div is the perfect solution for this container problem and that's why it is used so much. You can have paragraphs, images, and other elements inside the div.

However, unlike the HTML semantic elements like <main> <header> and <nav> which are also used as containers but describe the content they contain, the div tag doesn't describe its container. it is a generic kind of container.

In HTML, 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. This means that 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>.

So, where do you write the <div> tag in HTML?

A <div> tag should be placed inside the body section of an HTML file, which is defined with the opening and close syntaxes <body></body>. Also, to create a <div> element, you must use both an opening and a closing tag just like this:

Note: the HTML div tag is a block-level container.

Now, let's try out some examples.

Enter the following code in your code editor and open it in Chrome. Right-click the result in Chrome and click inspect. You will notice that the block around the div stretches to the end of the page. This is what it means by the div element being a block-level container.

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div>This is a div</div>
  </body>
</html>

One of the major differences between a div as a block element and an in-line HTML element like the span tag is that you can define 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 does not do anything. It only helps with organizing your HTML syntax into categories without necessarily affecting how this category appears on the front end. With the HTML div, you can split complex HTML syntax into various categories and style this individually.

Let's try this out with some examples.

First, we will write a few HTML codes in our div and then style this with CSS.

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div>
      <p>
      Talking Tech and AI with Google CEO Sundar Pichai!
    </p>

    <p>
      3.4M views &#183; 6 months ago
    </p>

    <p>
      Marques Brownlee &#10003;
    </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. Shop now &gt;
    </p>
  </body>
</html>

Result

https://codepen.io/VictoriaLazarus/pen/VwgWyBZ

Let's style the div with the CSS class or ID selector

Div with CSS class selector

We are going to be performing two actions here:
1. Write the class or id attribute inside the div.
2. Use the CSS class selector to style our div in a separate file or right below our HTML code.

For better organization, I will write my CSS code in a separate file and link this to the HTML file. You can check out how to do this in this documentation.

Below are pictures 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 &#183; 6 months ago
    </p>

    <p>
      Marques Brownlee &#10003;
    </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.Shop now &gt;
    </p>
  </body>
</html>

.My-divtest {
background-color: lightgray;
color: red;
font-weight: bold;
}

Result

https://codepen.io/VictoriaLazarus/pen/OJdgzwR

In the above example, we use the HTML div tag to style the elements contained within the tag. Notice that instead of writing out the CSS code of each paragraph, the div tag allows us to target a particular section of our HTML code and style as desired.

In the next example, we will try out the Div tag as Flexbox

HTML Div as Flexbox

Here, we will use the HTML div to change the layout of our HTML content. I want to create three flexbox grids with seven columns. As such, here are the actions that will help us to achieve this

Below the previous HTML code or in a new file, create a div tag.
Inside the div tag, create three other div tags.
write the flexbox container class or id selector inside the first div.
Style the div in your CSS file (if you created a separate file for your CSS code) or in the HTML code file (if you are writing your CSS in the HTML file). Below are pictures of the 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 &#183; 6 months ago
    </p>

    <p>
      Marques Brownlee &#10003;
    </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 &gt;</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

https://codepen.io/VictoriaLazarus/pen/vYbZedm

In the above example, we use the div tag to create a flexbox grid with some columns and background colors. So far, the different divs we have created are subsumed within one body tag. This shows that with the div, you can style different parts of an HTML code in a particular tag.

Div as CSS Arts

Now, let's create a circle using the HTML div. For this, we'll follow these two 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

https://codepen.io/VictoriaLazarus/pen/RwvgxMN

Note: the HTML div tag above was written in the same file as our previous codes, same as the CSS. I did not include the entire code to avoid unnecessary repetition. The result page explains this better, scroll down to see our beautiful circle.

Also, you will notice that, unlike the previous HTML div examples, there is no content in between the div tags. This is because we are creating a shape that doesn't require any text. Div tags like this are referred to as "empty div tags."

Conclusion

So far, we have seen that the div tag is a vital element in HTML. It comes in handy in splitting complex HTML syntax into categories that can be styled individually or together. And because the div tag doesn't affect the front-end side of the HTML code, we can use it to perform many different 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 👋.

Understanding the HTML Div Element and How it Works

Table of contents

Introduction

Prerequisite

Understanding the DIV Element

How does the HTML div tag work?

Div with CSS class selector

HTML Div as Flexbox

Div as CSS Arts

Conclusion

Subscribe to my newsletter

Victoria Lazarus

Victoria Lazarus