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

HTML HTML Text Preformatted Text

Posted by stevencooper
stevencooper
5,755 Points

What doe the "span" attribute mean?

Dumb question...Nick P went over it real quickly & I can't find the video he explains it in to go over it again, and my html book doesn't have the 'span' command in it. What does 'span' mean in html, and how is it used? What does it do?

A X
A X
12,842 Points

@stevencooper: I know this is an old post, but I too am baffled by span...I'm not seeing the point to it since it seems to just "mean nothing" other than providing a way of giving an in-line class....but can't you just say:

<p> A <class ="pretty> pony went galloping through the fields; it discovered a <class="pretty> rainbow. </p>

instead of 

<p> A <span class ="pretty> pony went galloping through the fields; it discovered a <span class="pretty> rainbow. </p>

?

RJ McLain
RJ McLain
16,380 Points

@nekilof You wouldn't be able to give a class to a non-existent element (so it would need to be a tag on it's own) and that way you can properly close it. So <class="example">CONTENT</class> isn't really a thing.

However <span class="example">CONTENT</span> would be valid.

3 Answers

RJ McLain
RJ McLain
16,380 Points

It is most commonly used to wrap around items or text, to label sections of text without effecting the actual look of the page.

So if you wanted to just change the styling of a text in part of a sentence just wrap a span tag around it, and you can add a class or an id to that section, creating an area you can refer to in your CSS

Vinay Kumar Reddy Yerram
Vinay Kumar Reddy Yerram
3,698 Points
Vinay Kumar Reddy Yerram
Vinay Kumar Reddy Yerram
3,698 Points

But,cant we do the same with div (or) section? If not, I would be greatly thankful for your explanation ?

RJ McLain
RJ McLain
16,380 Points

Vinay that's actually a great question, the main difference is that span doesn't put a break in anything, with div's and sections would go to the next line for each div and section used unless styled otherwise, span usually affects the layout much less than other options might and there's pretty much no visible difference in the look.

stevencooper
stevencooper
5,755 Points
stevencooper
stevencooper
5,755 Points

thanks for a great explanation

RJ McLain
RJ McLain
16,380 Points

Anytime

Hello World
PLUS
Hello World
Courses Plus Student 573 Points
Hello World
Hello World
Courses Plus Student 573 Points

The best way I can define these two is with CSS

<p>stewardesses is the <div>longest word that is typed with only</div> the left hand</p> <p>11% of people <span>are left handed but am not among</span> the one</p>

Try this in CSS, div { border-wdith: 1px; border-style: Dashed; border-color: #000000; }

span { border-wdith: 1px; border-style: Dashed; border-color: green; }

You would see a box around the Div section and Span section, what you'll notice is that in div section the line has broken and it continued in a new line, div creates a space and breaks the flow of the line.

Whereas, in span you wouldn't see a line break or a space between the texts.

We use it, <span id="someId" class="someClass"> so that it applies the CSS effect without disrupting the flow of the text </span>

Q->So, why not use the span on the entire HTML page, why do we even bother to use DIV ? : A-> Reason why we don't use span all over the page is because span doesn't create the modules for each section / division. You probably know very well that any webpage has multiple divisions i.e headlines, paragraphs, images, SVG animations, videos, etc. Don't you think we need to separate each of items into a separate division? Irrefutably yes, we do.

So, with <div> tag we make modules to each division and it becomes easy to distinguish each other in CSS. </div>

Correct me if I'm wrong, as even I'm learning everyday just like you...........