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

HTML How to Make a Website CSS: Cascading Style Sheets Use ID Selectors

Vilius Grižas
Vilius Grižas
2,753 Points

Do you really need a <div>?

Hey.

First of all I'd like to say thank you. Great work. Great lessons. I'm really enjoying. Hope things will stick in my mind. But that's another topic.

The question. Do you really need a <div> tag here? I mean now we just selected all of the <body>. If we would go any further and we would like to "divide" say <header> or <nav> tags in CSS page we could just write something like nav{ la: la la; }

What div is doing now is just respecifying (I guess).

If we do that our HTML would become larger and that makes the loading of the page longer am I right.

So short question is this. Do you really need to put <div> tags on sections could specify in CSS anyway?

6 Answers

Vilius Grižas
Vilius Grižas
2,753 Points

So by the end of the day it's just a matter of preference? If I prefer writing <div id... to <section> I just go for it. Right?

Not really, HTML 5 has a lot of benefits here is a great article explaining why a move towards HTML 5 is a good idea:

HTML 5

John Coolidge
John Coolidge
12,614 Points

Yes, for the most part, it is a matter of preference. But there are good reasons for sticking to HTML5 tags tho. We use tags like <nav> and <header> to make it clear what content we are putting in those tags. You could use a <div> tho, if you like. I think <nav> and <header> are easier to read when looking at my markup. As Jacob mentioned above, you can overuse <div> and make your markup very confusing. For me, <nav> and <header> are worth leaving as they are, while a <section> tag isn't nearly as useful to me, so I opt for another <div> tag in that situation instead.

John Coolidge
John Coolidge
12,614 Points

Hello Vilius,

For many developers, the section tag has a very specific purpose, for others it doesn't. HTML5 added a lot of new elements like section in order to make organization easier. No one is forced to use the section tag if they choose not to. You could just as easily use a div tag. There are pros and cons to both.

I prefer to use div tags with class/ID names that express the function of the content within the div. Div is also easier to type than section. Someone else, for stylistic purposes, might disagree. Choose your HTML styling habits that fit you best and stick to them for consistency.

I hope this helps. :)

John

The more specificity you have, the easier it is to control, with in reason. It really depends on what you are doing. Is good to have nested divs so you can hook styles to that div, yes, can you go overboard yes. So far as load times, HTML is not something you should worry about. Load time issues comes with img size, JS, BootStrap classes, that call 10-15 style sheets, and so on. I wound't worry about load times just yet, but it is good to think about. So to answer your question, yes using divs to use as wrappers, containers and to be able to style certain parts of a page are good, but don't go over board.

Vilius Grižas
Vilius Grižas
2,753 Points

Sorry! My bad. I missunderstood and put <div> on all the page. It should be from <section> part only. Sorry. But now I got curious. Whould you (advance developers) rather use <div> tags so seperate sertain parts or you prefer to tag them say: section ul{ bum bum; } kind of way?

Vilius Grižas
Vilius Grižas
2,753 Points

But then why couldn't we start using <div>'s right away? Like why do we need all those <header> <nav> etc tags in the first place. I could just go something like. <body> <div id="header"> content </div> <div id="section"> content </div> etc. </body>

Say you have to do something to all of <section> tag. All of it. Would you create a div for it? That is my main question now :)

Thanks for the help!

Vilius Grižas
Vilius Grižas
2,753 Points

Cool! Thank you very much! I like how responsice this place is! Thanks guys! Got motivated! Fist bump from Spain/Gibraltar! ;)