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
J.Ryan Moss
1,202 Pointswhy do i need a div wrapper inside of my code? and does a span tag do inside my paragraph tag?
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices euismod turpis eget porta. Etiam nulla massa, pretium et massa nec, ornare dignissim nisi.</span></p>
2 Answers
Samuel Stafford
9,676 Points1st Question: Divs are used to easily wrap (wrapper) sections of a document or (divide/div) the document up into sections and is a BLOCK level element. So if you needed to make a banner or otherwise group some elements together, a div would work great. My weird way of remembering is just thinking of a div as division. I'm dividing my document up.
2nd Question: Spans (<span>) should be used to wrap small portions of text, images, and other things. This allows you to style them independently of the elements that contain them.
NOTE: You can't place block level elements within inline level elements.
You can do something like this...
'''html <div>This a large main division, with <span>a small bit</span> of spanned text.</div> ''' but not this...
'''html <div>Some <span>text that <div>I want</div> to mark</span> up</div> ''' Here is a bigger example:
'''html
<div class="welcome">
<h2>Welcome to <span class="honey">Honey</span> Grove Park!</h2>
<p>We have all kinds of fun activities for everyone in the family to enjoy!
Walk our fully manicured <a href="/walkingtrails.html">walking</a> trails.
Clamber, climb and slide on our safe and extensive playgrounds and jungle gyms.
And don't forget to bring your <span class="blue">fishing</span> gear!
We have a pristine lake brimming with bass and other species to catch!
If you are not into fishing, but still like the water, no problem!
We have <span class="red">canoe</span> and <span class="orange">kayaks</span> to rent and trained
lifeguard staff on standby.
There is never a good reason to not enjoy a beautiful day at Honey Grove!
</p>
</div>
'''
Now, since I assigned classes to my spans, I can differentiate between them and make each a different color in a CSS stylesheet.
The word "honey" I'll make a golden honey color. Blue is blue, red is red and so on.
'''css .honey { color: #ffa500; } .blue { color: blue; } .red { color: red; } .orange { color: ff9a00; } ''' Hope this helps! Good luck!
Vince Jose
1,671 PointsHi! I am also just being to learn how to code. From how I understand, div is for you divide parts of the body into different sections, so you can style them by div (class or id). For example, in the header, you can have a div for the logo and a div for the nav bar. So you can target the div for the logo to float left and/or target the nav bar div to float right..
I do not personally use span too much, but a good example is if you have a paragraph with 3 sentences and you want to style the first sentence only, you have to put span on that first sentence, so you can style it independently.
J.Ryan Moss
1,202 Pointsthank you buddy.. i appreciate your input
J.Ryan Moss
1,202 PointsJ.Ryan Moss
1,202 Pointsthanks for the in depth explanation. I have a better understanding of a div now!! and I thought that was what a span was, however, I just wanted to make sure my notions were correct!