🎨 Part 2: Div tags for layout building

HTML has tons of tags to build up the website.

While in the previous article we went over the elements that make up the big part of the website, like forms, images and content, in this article we go over the blocks that make up the layout of the page.

Div tag

Div tags are used for building the layouts of a website. Each container or block you see on a website, is likely a div-element. You can nest these div elements as much as you need, and give them class attributes.
Classes are used to attach specific styling to these elements.

<div class="header">This is a basic div, with a class called "header".</div>

<!-- This is a basic nested div -->
<div class="content-block">
   <p>This is another block.</p>
   <div class="block-image">
     <img src="https://patchstack.com/wp-content/uploads/2025/02/patchstack_team-1.webp">
   </div>
</div>

We can’t see any effects of the divs before we add styling to them. However, HTML can be positioned in very different way with a little CSS styling.

Let’s learn about CSS in the next part.

Scroll to Top