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

Diane Kostik
Diane Kostik
2,005 Points
Posted by Diane Kostik
Diane Kostik
2,005 Points

Why was the <span> tag assigned to "time" in the ordered list at the bottom of the page? When is <span> used?

Why was the <span> tag assigned to "time" in the ordered list at the bottom of the page? When is <span> used?

2 Answers

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

One handy use for <span> is to enclose text to make it into a separate element, which then can be styled by CSS or manipulated in JavaScript.

It's not necessary in this example, and the instructor does say "You could've used a different approach for this and that's okay."

Vladimir Tuska
Vladimir Tuska
4,280 Points
Vladimir Tuska
Vladimir Tuska
4,280 Points

Another element that could be used in this context is <time>. <span> is a generic wrapper for an inline content, same way as <div> is a generic wrapper for a block content.

    <section>
        <!-- Level 2 section heading -->
        <h2>Schedule</h2>

        <!-- Display the schedule as an ordered list -->
        <ol>
            <li>
                <h3>Get Ready for the Future of CSS</h3>
                <p>Cee Esses</p>
                <time datetime="12:00">12:00pm</time>
            </li>
            <li>
                <h3>All Things Frameworks</h3>
                <p>Jay Query</p>
                <time datetime="13:00">1:00pm</time>
            </li>
            <li>
                <h3>ES2018 and Beyond</h3>
                <p>Ecma Scriptnstuff</p>
                <time datetime="14:00">2:00pm</time>
            </li>
        </ol>
    </section>
Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

But be aware that <time> requires a strictly-formatted datetime attribute, it must not have any element descendants, and is not supported in legacy (including all IE) browsers.