" Tag Instead Of "

" Tag Or "

" Tag Instead Of "

" Tag Or "

Why Did The Tutor Put A "" Tag Instead Of "

" Tag Or "

Trang chủ » Html P Tag Alternative » Why Did The Tutor Put A "" Tag Instead Of "

" Tag Or "

Có thể bạn quan tâm

🤑 Join the Treehouse affiliate program and earn 25% commission!

🌟 Dreaming of a bright future? 🎓 Ask about the Treehouse Scholarship program! 🚀

A new Figma course has dropped!

🫡 Treehouse for Military offers discounts to Veterans, service members and their families!

  • Treehouse Logo
  • Plans Chevron
    • For Individuals
    • For Businesses
    • For Schools
    • For Libraries
    • For Military
  • Library Chevron
    • All Courses
    • Tracks
  • Techdegree Chevron
    • Overview
    • Front End Development
    • Full Stack JavaScript
    • Data Analysis
    • UX Design
    • Python
  • Community Chevron
    • 100 Days of Code
    • Live Sessions
    • Code Adventures
    • Discord
    • Forum
    • Success Stories
    • Treehouse Links
  • Resources Chevron
    • Career Toolbox
    • CodeForward
    • Free Treehouse Near Me
    • Jobs
    • Blog
    • Support
    • About
  • Plans For Individuals For Businesses For Schools For Libraries For Military
  • Library All Courses Tracks
  • Techdegree Overview Front End Web Development Full Stack JavaScript Python Development Data Analysis UX Design
  • Community 100 Days of Code Live Sessions Code Adventures Discord Forum Success Stories Treehouse Links
  • Resources Career Toolbox CodeForward Free Treehouse Near Me Jobs Blog Support About
  • Sign In
  • Free Trial
Instagram Twitter Facebook YouTube LinkedIn

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
  • Watch Video

CSS CSS Basics (2014) Basic Selectors Intro to Selectors

rintocyriac
rintocyriac
1,296 Points Posted October 8, 2015 12:01pm by rintocyriac
rintocyriac
1,296 Points 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 Jordan Hudson
Jordan Hudson
2,977 Points October 8, 2015 12:40pm

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 Craig Watson
Craig Watson
27,930 Points October 8, 2015 12:47pm

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 Jordan Hudson
Jordan Hudson
2,977 Points October 8, 2015 12:52pm

Thumbs up

Jordan Hudson
Jordan Hudson
2,977 Points Jordan Hudson
Jordan Hudson
2,977 Points October 8, 2015 12:26pm

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.

rintocyriac
rintocyriac
1,296 Points rintocyriac
rintocyriac
1,296 Points October 8, 2015 12:45pm

Thank you very much for the prompt reply Jordan.

That makes sense now. :)

Jordan Hudson
Jordan Hudson
2,977 Points Jordan Hudson
Jordan Hudson
2,977 Points October 8, 2015 12:52pm

No problem!

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

Cheers.

rintocyriac
rintocyriac
1,296 Points rintocyriac
rintocyriac
1,296 Points October 8, 2015 12:53pm

Thank you guys. Much appreciated your quick help.

Thanks, Rinto

rintocyriac
rintocyriac
1,296 Points rintocyriac
rintocyriac
1,296 Points October 8, 2015 12:29pm

<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.

Posting to the forum is only allowed for members with active accounts. Please sign in or sign up to post.