Need help understanding <span> tags better :)


#1

Hello again! I am back again! And I am saying this again. 3x again.

Regarding the <span> tag, does it work like a selector? Meaning, it lets us select a range of text/ or certain areas of our HTML code which we can style separately with CSS?

Like a multi-attack in a RPG? When one character attacks multiple opponents in one go instead of one at a time (like wizards you know, they cast a spell of thunder/ice and it covers a wider range and attacks the entire enemy group instead of a single guy)

Does it work in that sense in HTML?
Thanks! :smiley:

If you guys can cite a few examples it would really help!


#2

<span> is html element. Apart from the style attribute, css hasn't been covered yet, right? But yes, we can use span to make word(s) in a sentence a different color, font-family, font-size

html is just a mark up language. Comparing it to games is not possible


#3

Hey nestergen,

I will tell you something about spans that you could use later for when you learn css. :relaxed:

Span tags are family of the inline elements which means they all stand next to each other by default and they only take the width they need. Other elements of this family are img, em and strong tags.

The opposite of inline elements are block elements, like p tags, divs and sections. They take the full width of your page and they always stand below each other by default.

Like stetim94 already said, you can use spans in paragraphs or headings to give a word a different color or font-size.

Examples:

<h1><span style="color:purple;">I</span> like to <span style="color: cyan; font-size: 2em;">code</span></h1>

<p>Pikachu uses <span style="font-family: georgia; color: orange;">thunderbolt</span>. It's <span style="font-weight:bold;">super effective</span> </p>

I think you could see it like a big fire or ice attack when using css. Because you won't have to declare the span styles inline anymore. You just write
span {
color: blue;
}

And all the spans on the page will turn blue.


#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.