Where to use div in HTML/CSS with examples

In this article, you will learn where to use div in your web projects, with practical examples and the best situations for the element.

Where to use div?

A question for many beginners in the web world and also for people who already have a certain domain is: where do I use a div?

Because the element, for not having a very obvious name, leaves us without knowing the best place to use it.

But it is exactly this question of the name, of being broad, that brings the versatility to the div tag.

We can use it mainly to delimit element containers or we can also call it components.

An example:

<div>
 <h1>Product Name</h1>
 <p>Product Description</p>
 <p>R$10.00</p>
</div>

This component above, for example, is the description of a product.

Realize that the elements within the div participate in a similar context, they are linked by the main subject: The product

So this is a classic case of using divs, when there are elements that share the same meaning we can encapsulate them in a div.

Another cool use case for divs is when there is the constant repetition of elements, for example, picture cards.

So by creating this layout of each card in a div, we have more control over making structure changes depending on the user’s resolution.

For example: with CSS I can modify these divs in a grid for desktop and in mobile one under the other

<div id="container">
 <div class="card">
  <img src="...">
  <p>Image Description</p>
 </div>
 <div class="card">
  <img src="...">
  <p>Image Description</p>
 </div>
 <div class="card">
  <img src="...">
  <p>Image Description</p>
 </div>
</div>

Here in this example, we use a strategy div serving as a container too, there is an id container div holding the cards

And then we have each card in a div with a card class

Note the differentiation of approach that, because of a class and id, can have as much utility as completely different styles

Where not to use div

More important than knowing where to use it is knowing where not to use divs, so let’s see some good examples.

You shouldn’t use divs in HTML when there are semantic elements that fit your code better.

For example site footer, use footer tag instead of div.

Understand the footer element by clicking here!

Semantic elements are HTML tags that came in version 5, these tags help your code make more sense for both people who program and those who don’t.

Because their names are very objective, making their use on a web page clear.

Another interesting tip is that in a site navigation menu you should use the nav tag instead of the div tag.

Learn more about the nav element by clicking here!

These HTML5 tags in addition to making the code more meaningful and easier to maintain

They help your site to gain SEO (Search Engine Optimization) and consequently get better positioned on Google

Conclusion

We saw that divs should be used basically when there is a need to group elements with the same meaning (in the case of the product description).

Or also for large containers, splitting sections of code.

But pay attention to sections of the site use the semantic element section!

And we also learned that we shouldn’t use a div when there’s a semantic element that fits the context better.

And that’s it for today, until the next post!