I will tell you something about spans that you could use later for when you learn css.
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.
<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
And all the spans on the page will turn blue.