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 HTML Forms Organizing Forms Fieldsets and Legends

Sahan Balasuriya
Sahan Balasuriya
10,115 Points

whats the purpose of the class attribute in <span>

what does it do

3 Answers

Hi,

Like every class attribute it helps you to target tags and other parts of your code more specifically.

You may have 4 span tags in your code and you want 2 of them to make one thing, and the other two something different.

In that way the two groups of span tags have to have different classes (or id).

Sjors Theuns
Sjors Theuns
6,091 Points

Hi Sahan,

classes mostly used for css. If you have a span with a class "a_class" you can apply formatting. Here is an example:

<!DOCTYPE html>
<html>
    <head>
        <title>Title of the document</title>
        <style>
            .a_class {
                color: green;
                font-size: 1.75em;
                font-weight: bold;
            }
        </style>
    </head>

    <body>
        <span class="a_class">This text is green and bold.</span>
    </body>

</html>

Sahan,

The element is supposed to be used for inline styling like referenced in the other answers. From there, applying a "class" attribute to a span would be effective for:

(1) applying style(s) to a section of HTML (2) creating semantic clarity, linking a phone number by using the class "tel" so that a smart phone or some computers could automatically call the number (3) lastly, it could be used for when JavaScript and other languages are used to generate pages or information on pages

Hi Eric,

I have question about class "tel" for automatically call. I thought that we use phone link for it, for example

<a href="tel:1-408-555-5555">1-408-555-5555</a>

May we use span and class "tel" too?