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

CSS CSS Basics (2014) Basic Selectors Intro to Selectors

Why did the tutor put a "<span>" tag instead of "<p>" tag or "<h1>" tag in the html document?

Why did the tutor put a "<span>" tag instead of "<p>" tag or "<h1>" tag in the html document?

6 Answers

Jordan Hudson
Jordan Hudson
2,977 Points

Thanks for linking the code.

< span > has no meaning other than to serve as a tool to style in CSS.

When using < h1 > this will already have, for example, a set font-weight which will be interpreted by the browser.

So perhaps the teacher just wanted the 'Journey through the Sierra Nevada Mountains' text to be plain so that he could style it from scratch? That's my guess. Like I said, < span > is rarely used. But Treehouse likes to show its students outdated code and as you go along, explain why there is new, more optimal code that should be used instead. It's a really good way of learning in my opinion as it stops you from just taking things for granted.

Hope this helped again Rinto!

Thanks, Jordan.

Craig Watson
Craig Watson
27,930 Points

Hi Rinto,

A span element is regarded as having no semantic value as Jordan has pointed out, the reason for this is with all the HTML 5 tags available it seems pretty silly to set up a number of different classes that style text apply them to span tags and have them littered all over the site. There is mostly likely a HTML 5 tag that can get you pretty damn close to what you need saving you lots of CSS.

However, there are many times when a span element will come in handy, you will see them used a lot for icon fonts because of the default inline properties.

Within coding you will find many examples like this were you have to decide for yourself based on the project at hand what elements best suit your needs and work within the semantics of the site.

It may well have taken less CSS to style this span element than it would have have to over ride style from a p.

Another thing worth mentioning is that when creating a web page, I like to stick to using only one h1 tag, the browser recognizes this as the up most title so more than one would end in a conflict. For a one page site you may have the company name as a H1 but each section I would then use h2 breaking up the structure accordingly.

Hope this helps

Craig

Jordan Hudson
Jordan Hudson
2,977 Points

Hey Rinto!

Could you copy the code example onto here so we could take a look at it?

< span > is used to group inline-elements so that you can style them. Span is Inline. It is non-semantic.

< p > is used for a paragraph which is a block element. Which can be styled also. Paragraph is Block. It is semantic.

Perhaps the teacher was just showing you an alternative way of styling HTML? I believe it is rarely used.

Hope this helped?

Jordan.

Thank you very much for the prompt reply Jordan.

That makes sense now. :)

Jordan Hudson
Jordan Hudson
2,977 Points

No problem!

Craig has mentioned a good couple of reasons why to and not to use < span > below.

Cheers.

Thank you guys. Much appreciated your quick help.

Thanks, Rinto

<header id="top" class="main-header"> <span>Journey through the Sierra Nevada Mountains</span> <h1>Lake Tahoe, California</h1> </header> <div class="primary-content">

This is the span i was talking about.