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

Posted by Ryan Jin
Ryan Jin
15,337 Points

What does the <span> tag do

Hi, I am currently learning CSS Basics, and I see a <span></span> tag in the <header> section, I wonder what is it for, is it displaying anything for the user, or it is just something like <section></section>

3 Answers

Eiyad Ziyadah
Eiyad Ziyadah
19,250 Points

Span is like the div element, it in itself has no semantic or presentational value. It is used to group inline-elements in a document, add a hook to a part of a text or a part of a document. it gives flexibility working with it in CSS and Javascript. please refer to the below CodePen example.

http://codepen.io/eiyadz/pen/GJYOxy

Douglas Counts
Douglas Counts
10,623 Points
Douglas Counts
Douglas Counts
10,623 Points

Usually all the text between tags is treated identically and as a single entity. Using spans permits you to do things to parts of the text within the parent tags that you normally couldn't do. For example, you could float part of the text to the left edge and a following section of text to the right edge. Also because it is a span, both are seen as being on the same line instead of stacking on top of each other.

Good luck,

If you found this helpful then please up-vote my answer....

davidanguiano2
davidanguiano2
6,859 Points

This is the only explanation that actually made sense to me.

Bjorn Lottering
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Bjorn Lottering
Full Stack JavaScript v2 Techdegree Graduate 23,612 Points
Bjorn Lottering
.a{fill-rule:evenodd;}techdegree seal-36
Bjorn Lottering
Full Stack JavaScript v2 Techdegree Graduate 23,612 Points

Hi Ryan Jin

The tag provides no visual change by itself, it provides a way to add a hook to a part of a text or a part of a document.

When the text is hooked in a span element you can add styles to the content, or manipulate the content with for example JavaScript or CSS.