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
Joseph Torres
6,282 Pointsdiv tag vs semantic tags question!
Hello folks, Im writing out my first website and I understand that there are new tags in html5 for the sake of semantics however Im a little lost with something. As I code my navigation bar, the typical ul and li are nested within a header tag and thats it. I really thought that a div tag would not be needed. I created a class for the header tag and tried to create a background color in css however no changes occur. Am I still to use div tags now and in the future? Is there a rule of thumb for this?
3 Answers
Glenré Charl Labuschagné
23,204 PointsHi Joseph,
Most of the new HTML5 semantic tags should be able to be styled exactly the same as divs. Aside from browser (default) spacing and display (inline, inline-block) there should be no difference. It's in how you use them (correctly) and for what purpose. And yes, divs are still recommended for future use (and will never die) as a non-semantic markup tag.
Glenré Charl Labuschagné
23,204 PointsHi Joseph,
Yes, you could use the CSS selector nav, but I wouldn't drop the use of classes and ID's. I use BEM (Block Element Modifier), to give myself a clear indication of what my markup is for and what element has which styling applied ~ which is totally a different discussion and I would highly recommend Guil's Modular CSS with Sass course. Remember the semantic code gives your mark up more meaning for vision impaired site visitors, bots and even Google. I know it's daunting at first, but all of this will become second nature and soon yours to be passed on as your own advise to others.
Joseph Torres
6,282 PointsThank you so much. Are you suggesting that by learning Sass, I will understand CSS better?
Glenré Charl Labuschagné
23,204 PointsHi Joseph,
I would recommend Sass as soon as you feel comfortable with CSS, because as the Sass website banner says it gives "CSS (with) superpowers".
My best advise is follow and complete a chosen Treehouse Tracks that are customized lists of courses and workshops that provide a guided learning path for a particular subject. Each course or workshop in a Track builds on the previous one, so that as you progress through a track you gain a solid understanding of the topic.
BEM isn't a technology or a software but more a way of doing/or idea with the goal of helping developers better understand the relationship between the HTML and CSS in a given project.
It might seems overwhelming to what to learn (as there is so much): but this is where Treehouse Tracks are a lifesaver (a lighthouse in misty weather). As the saying goes: How do you eat an elephant? ~ One bite at a time.
Glenré Charl Labuschagné
23,204 PointsGlenré Charl Labuschagné
23,204 PointsPs: long live tables. They aren't recommend but they certainly have their use!!
Joseph Torres
6,282 PointsJoseph Torres
6,282 PointsThank you so much for your response. I've been working non my navigation bar and was wondering if I really need to create a class or id for each of the new HTML5 semantic tags. For example, if I have a nav tag and nested li's, can I just call the nav tag in CSS like so: nav {}. Or do I have to create a class to call it in CSS? I just think this is unnecessary unless I have more than one nav tag in my code.