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
Noel Hale
1,715 PointsUSE DIV OR SECTION ELEMENT
Just a quick straight forward question as a complete newbie.
I was just wondering inside the body element, what is the difference between using a <div> selector or <section> selector to mark out where you want stuff to be. Is it that you can basically just use one or the other or is there pro & cons involved. Am i right in saying that the section selector is a html tag that can be targeted direct but a div tag must be giving a class before you target it??
Silly I know but i was just thinking if you give the first pair of div tags a class of section and then nest everything else inside. What that not just be accomplishing the same thing as using a section??
Apologies if thats a silly question it would just help me comprehend coding better. Its hard get your head around all this information....especially as a late starter to learning web design at 36!! But im enjoying the journey...dont know why exactly but when im typing code or learning it I feel happy almost passionate with a purpose!! Never got that from any job ive ever been in. So im gona keep at it in search of my first eureka moment!!
Thanks in advance for your advice!
Noel
Noel Hale
1,715 PointsYour spot on Aaron ive just went back over the ccs tutorial from the start there....and now comprehending better the difference between type/element, id & class selectors and reasons for their use.
Appreciate you coming back.
Noel
7 Answers
Olga Kireeva
9,609 PointsHello Noel, you have already got some very good and helpful answers. I just want to add a little to them. Your question: Am i right in saying that the section selector is a html tag that can be targeted direct but a div tag must be giving a class before you target it?? Any html tag can be targeted directly. The id and classes attributes can be used on any HTML5 element. So, the answer on your question: you can target section and div selectors directly or assign them id or classes. It will depend on what task you need to accomplish. The section selector was introduced in HTML5 for semantic purposes. You can also check these articles:
The difference between DIV and SECTION: http://webdesign.about.com/od/html5tags/fl/div-vs-section.htm
CSS Selectors: http://www.w3schools.com/css/css_selectors.asp
Your question: if you give the first pair of div tags a class of section and then nest everything else inside. What that not just be accomplishing the same thing as using a section?? You will give the first pair of div tags a class of any name (it can be section or something else), if you want to style both divs the same way. You can use a section instead of those divs if you want to give a semantic distinction (like a header, article, e.t.c.) to this part of the html document. The section tag usually defines sections in a document, such as chapters, headers, and footers.
Noel Hale
1,715 PointsThanks Olga, really useful resource on the difference between div & section. Thank you so much.
Really starting to understand it now. Also, now realizing I am using html 5 semantics therefore be aware of the differences over previous iterations of html as well!
This was my first ever post on the the treehouse forum and request for advice and I couldn't be happier with the feedback. Its really great knowing there is support there. I love how every day learning to code reveals something else knew to me or helps me fully understand a concept from the day before. Loving the virtual journey.
Thanks for all your help guys.
Noel - aka HaLeR
Jovanny Elias
16,204 PointsYou are correct here is a guide on what the difference between ids and classes are by end you can see how important it is to use the correct one. You don't need to fully understand the part about JavaScript at the end of the article just yet but having an understanding of it now would make it much more simple when you do start learning javascript.
One note you can add ids and classes to both div's and sections. In order to understand it more take a look at this blog it cover the reason why naming things semantically is such an important part of web development in general.
Good luck with your learning
Noel Hale
1,715 PointsThanks for your help Jovanny your a gentleman. Ill have a good read over that guide.
Noel Hale
1,715 PointsJust read the blog.....great info and very helpful in understanding the difference between the selectors.
Thanks again Jovanny, much appreciated.
Noel
Jovanny Elias
16,204 PointsI am glad I could help
Hannah Mackaness
4,437 Pointsheya, I am also struggling with this and after some research I wanted to check my understanding..Is it true:
If content is related (and could use a heading and maybe a footer) it's a section. You can target a section directly in css with just section {...}. A div "doesn't mean anything", and is just for grouping unconnected elements together- and if you want to style random, unconnected parts of a page you can put them in a div and you must add a class or id in order to stlye those bits ie .somethoughts {..} #animalimages{..}?
I read that div is useful for gathering together bits of the page you want to style together as block elements, and that span is useful for gathering together bits of the page you want to style together as inline elements. Is that true? What is the default display for section?If you add a div or span element inside the section does it take on their display properties?
Thank you from a neeewwwbiiieeee
Olga Kireeva
9,609 PointsHi Hannah, If you want to see how a section, div and span are displayed - create a simple html document with Lorem Ipsum http://www.lipsum.com/ and play with all these tags.
Also, you can check this example with div and section tags: http://www.w3schools.com/html/html_layout.asp and the explanation from W3 consortium: http://dev.w3.org/html5/spec-author-view/the-section-element.html#the-section-element
Hope it will clarify your question.
Hannah Mackaness
4,437 Pointsmaking the html doc with the Lorem Ipsum is a great suggestion, thanks :)
zbanx
3,264 PointsSo glad to find this resource. you are all helping this old dog learn new tricks
aaron Leighton
Full Stack JavaScript Techdegree Student 1,267 Pointsaaron Leighton
Full Stack JavaScript Techdegree Student 1,267 PointsI don't know the exact answer to your question, but keep with it and Im sure it will become clearer as you progress.