How to use div tag in HTML to divide the page

Learn how to divide the page in HTML using the div tag in 3 easy steps.

Step 1: Add the div tags

Let’s say you want to divide the page into three sections. You can do this by adding three empty div tags.

<div></div>
<div></div>
<div></div>

Step 2: Add the class name to div tags

The next step is to add the class name to the div tags and give them a unique name. The class name attribute separates the other div tags, and when you apply CSS styling to one of the sections, it won’t affect the sections.

Here, I named them one, two, and three, but you are free to call whatever you want.

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

Step 3: Add the contents

At this point, you’re all set! The page is divide into three sections, and you can add any contents like texts, images, etc., inside the div tags. Here, I added a simple text to give you an idea.

<div class="one">
  <h1>This is section one</h1>
</div>
<div class="two">
  <h1>This is section two</h1>
</div>
<div class="three">
  <h1>This is section three</h1>
</div>

Example code

Here’s an example code of how you can divide the page with the div tag. The margin, div, and h1 properties are included only for demonstration purposes.

<style>
  body {
    margin: 0;
  }

  div {
    padding: 65px;
  }

  h1 {
    text-align: center;
  }

  .one {
    background-color: red;
  }

  .two {
    background-color: yellow;
  }

  .three {
    background-color: green;
  }
</style>

<div class="one">
  <h1>This is section one</h1>
</div>
<div class="two">
  <h1>This is section two</h1>
</div>
<div class="three">
  <h1>This is section three</h1>
</div>

Example output

And here’s how it will turn out on the browser:

Important notice

We recommend using the section tag to divide the page. The section tag improves the readability of the HTML code since adding too many div tags can make it hard to read the code.

In addition to that, you are helping to improve the website’s accessibility so that people with disabilities can use your website. And finally, you are also helping the search engines to understand the content of your web page.

If you want to refresh your knowledge of the div tag and learn what else it can do, check out this article about what “div” does in HTML.

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript