Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Reggie Sibley
Reggie Sibley
6,018 Points

Im having a hard time with <div> element

i have not yet required a solid understanding of how the <div> element works. i know that it stands for division, and to my understanding it is used to section things off into box elements? IDK i'm still learning and ive been playing around with it alot in HTML but cant seem to understand when exactly i need to use them, like i would use it like this

<body>
<div class="header">
    <div class="container">
        <div class="logo">

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

to section parts of my website, but i honestly don't know when the appropriate time and most useful time to use a <div> is, if someone could break it down and provide some examples or code pen of how it should be used properly, and when when it shouldn't, i would be very appreciative!

4 Answers

Hossam Khalifa
Hossam Khalifa
17,200 Points
Hossam Khalifa
Hossam Khalifa
17,200 Points

The HTML <div> element (or HTML Document Division Element) is the generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element (such as <article> or <nav>) is appropriate.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey Reggie,

Hope you like cooking because we gonna bake a pie.
This is how to think of a website.

<!DOCTYPE html>
<html> <!-- This is the Oven -->

    <body> <!-- This is the cooking pot -->

        <div class="packet-of-peas"> <!-- This is the packaging for the ingredients -->            
            <p class="peas">peas</p>  <!-- This is the ingredients -->              
        </div>

        <div class="packet-of-carrots"> <!-- This is the packaging for the ingredients -->            
            <p class="peas">carrots</p>  <!-- This is the ingredients -->              
        </div>

        <div class="packet-of-mince"> <!-- This is the packaging for the ingredients -->            
            <p class="peas">mince</p>  <!-- This is the ingredients -->              
        </div>

    </body>
</html>

So first we need an oven (html) to put everything inside.
Next, we need a pot to put all our code (ingredients) in, (body).
Now all our code (ingredients) has to come in some sort of packaging (div).
Inside the packaging (div) is the food (website content).

So the way i see it, every piece of food has to be wrapped in a packaging, or it would just fall apart.

Or we could say

So the way i see it, every piece of code has to be wrapped in a div, or it would just fall apart.

So the next time you want to add some content to your website, just think that the code you are going to write needs to be in a div, and you may want to give that div a class or id (which would be like the label on the packaging).

Okay, so i hope that clears things up a bit, as i quite enjoyed writing this.
Any more queries just ask.

Hope this helps.

Erik Sayce
Erik Sayce
4,704 Points

I enjoyed this very much!

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Just think of a div as a box. A container where you can store and organise your documents content.

A div is as big as it needs to be but you can set the background colour of the div in CSS to see exactly how big your div element is using CSS

background-color: blue;

And again to set it's own custom size.

width: 200px;
height: 200px;

Hope this helps you. :)

Reggie Sibley
Reggie Sibley
6,018 Points
Reggie Sibley
Reggie Sibley
6,018 Points

Everyones input was helpful one way or another, thanks alot!