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
Ker Sing Tan
10,573 PointsHi, what is the difference between 'span' and 'div'? What are their functions?
Hi, what is the difference between 'span' and 'div'? What are their functions?
kelvino
Courses Plus Student 10,694 PointsReferences HTML Tag: span HTML Tag: div
kelvino
Courses Plus Student 10,694 PointsI suggest you try to read this tutorial field out to get a better understanding of <div>/<span> elements here: https://htmldog.com/guides/html/intermediate/spandiv/
Mauricio Hernandez
7,208 PointsBlessings, John 3:16 (NIV). Jesus loves you.
5 Answers
Ross King
20,704 PointsHi Ker Sing Tan ,
A <div> element is a generic block level container for content. This is used to divide content on a page. For example, the following code will divide the page into to blocks containing section 1 and section 2.
<div>
<h1>Section 1</h1>
</div>
<div>
<h2>Section 2</h2>
</div>
A <span> element is a generic inline container for phrasing content. For example, the following will wrap the text "Section" in a span tag and style it red.
<div>
<h1><span style="color: red">Section</span> 1</h1>
</div>
The above examples are generic and as you progress through courses, you will learn semantic and meaningful ways of writing HTML.
kelvino
Courses Plus Student 10,694 PointsI think the difference between span and div is that a span element is in-line and usually used for a small chunk of HTML inside a line, such as inside a paragraph, whereas a div (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code. I do know this helps...
Yanxia Lin
5,243 Points(Thumbs up) Totally agree with you! Thanks for sharing.
Ker Sing Tan
10,573 PointsThank you !
Adewale Salami
349 PointsExcellent!
Petter Santos Åkerlind
94 PointsGreat answer
kelvino
Courses Plus Student 10,694 Pointskelvino
Courses Plus Student 10,694 PointsSpan and Div HTML is all about applying to mean to content. Whereas most HTML tags apply meaning (p makes a paragraph, h1 makes a heading, etc.), the span and div tags apply no meaning at all. This might sound about as useful as a foam hammer but they are actually used quite extensively in conjunction with CSS.
They are used to group together a chunk of HTML and hook some information onto that chunk, most commonly with the attributes class and id to associate the element with a class or id CSS selector.
The difference between span and div is that a span element is in-line and usually used for a small chunk of HTML inside a line (such as inside a paragraph) whereas a div (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.
<div id="scissors"> <p>This is <span class="paper">crazy</span></p> </div> div, and especially span shouldn’t actually be used that often. Whenever there is a sensible alternative that should be used instead. For example, if you want to emphasize the word “crazy” and the class “paper” is adding italics for visual emphasis, then, for richer, more meaningful content, the code might look like this:
<div id="scissors"> <p>This is <em class="paper">crazy</em></p> </div>