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 jQuery Basics (2014) Creating a Spoiler Revealer Perform: Part 1

Posted by Britton Zirkle
Britton Zirkle
Courses Plus Student 15,005 Points

Markup Question

I am curious why the markup for the spoiler revealer project uses a p tag to create a container for a span tag which contains text. It seems like it should be the other way around or it should be a div that contains a paragraph. Just trying to get clarification

<p class="spoiler">
        <!--Spoiler:-->
        <span>Darth Vader is Luke Skywalker's Father! Noooooooooooo!</span>
    </p>
    <p class="spoiler">
        <!--Spoiler:-->
        <span>Luke and Leia are siblings. Ew.</span>
    </p>
James Nelson
James Nelson
23,956 Points
James Nelson
James Nelson
23,956 Points

Hello Britton,

You answered your own question in a way on that forum post. The reason it's been marked up in a paragraph tag is because it contains text. For accessibility purposes and just general good front end development practises markup should always reflect the content.

John Story
John Story
7,885 Points
John Story
John Story
7,885 Points

A p tag is a block level element. So it takes up as much space as it can. While a span tag has no inherent space. They are mainly used to just contain text. So you wouldn't put the large item inside of a smaller one

2 Answers

Iulia Copaci
Iulia Copaci
5,039 Points
Iulia Copaci
Iulia Copaci
5,039 Points

Hello Britton,

As you probably know, elements can be displayed as inline elements or block elements. Well, <span> is displayed as an inline element, only taking the space that it needs, unlike block elements such as <p>, <div>, headings & lists that take all space (width) available based on the parent. It's easier to style a block element.

Hope this helps :)

Zachary Betz
Zachary Betz
10,413 Points
Zachary Betz
Zachary Betz
10,413 Points

Britton, you've got the right idea.

If you were just displaying text, the <p> element would be sufficient. But since the text is wrapped in <span> tags, it looks to me like that text will be styled with CSS somehow.

In other words, it is usually better to use the <span> element when styling specific bits of text.

If the text within the <span> tags does not receive special formatting of any kind, then they are not needed.

Hope that helps.