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 One Solution

Posted by Thomas Bathurst
Thomas Bathurst
1,576 Points

Why would you use <span> rather than just another <p> element?

During the Schedule section, is there any reason why the instructor has used the <span> element to put the time on a separate line? From checking MDN documentation, I was under the impression that span was an inline element, so I'm a bit confused as to why this has put the time on it's own separate line.

For my own attempt I just used a <p> element, and although I know he mentions in the video that we could have coded it differently to how he has, I can't help but feel that the paragraph element would have been the most obvious solution?

Any thoughts on this?

4 Answers

Peter Vann
Peter Vann
36,425 Points

Hi Thomas!

Since the element above it is a <p> element (block level by default), it really doesn't matter what the time element is:

p, span, and div as well as any h tags, depending on how you style them, would all work equally well.

I can only assume he went with span, to slightly differentiate those elements in the code for easier readability.

I hope that helps.

Stay safe and happy coding!

Thomas Bathurst
Thomas Bathurst
1,576 Points

Thanks Peter for your comment!

I was really having a "head scratch moment" when I saw this, so I'm really grateful for your explanation!

Hopefully someday I'll fully understand coding heh.

Nikk Wood
seal-mask
.a{fill-rule:evenodd;}techdegree
Nikk Wood
Web Development Techdegree Student 706 Points
Nikk Wood
.a{fill-rule:evenodd;}techdegree
Nikk Wood
Web Development Techdegree Student 706 Points

Yes - I also used the <p> tag, so was a bit confused why he had used <span>. But as he said that 'you could have done a different way, I guess it's all about selecting the right option for the clearest semantic code.

Just glad it wasn't just me scratching my head!

Thanks and stay safe.

Lorenzo Carolus
seal-mask
.a{fill-rule:evenodd;}techdegree
Lorenzo Carolus
Web Development Techdegree Student 772 Points
Lorenzo Carolus
.a{fill-rule:evenodd;}techdegree
Lorenzo Carolus
Web Development Techdegree Student 772 Points

the span element is use to style inline text etc Div is similar to the span element but its use to wrap a block content to style Both has no semantic meaning Also keep in mind that the <p> element is a block level element

Jonathan Pyper
Jonathan Pyper
353 Points
Jonathan Pyper
Jonathan Pyper
353 Points

https://html.com/semantic-markup/

There are many ways to write HTML, but only a few correct.