CSS CSS Basics Basic Selectors ID Selectors

USE 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

I don't know the exact answer to your question, but keep with it and Im sure it will become clearer as you progress.

Your 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
Olga Kireeva
9,609 Points

Hello 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.

Thanks 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
Jovanny Elias
14,386 Points

You 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

Thanks for your help Jovanny your a gentleman. Ill have a good read over that guide.

Just read the blog.....great info and very helpful in understanding the difference between the selectors.

Thanks again Jovanny, much appreciated.

Noel

Hannah Mackaness
Hannah Mackaness
4,437 Points

heya, 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
Olga Kireeva
9,609 Points

Hi 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
Hannah Mackaness
4,437 Points

making the html doc with the Lorem Ipsum is a great suggestion, thanks :)

So glad to find this resource. you are all helping this old dog learn new tricks