Why would we want to separate small pieces of content?

Hi what do u mean by saying "to provide an english translation when the text is most over.

…moused over?coz when i mouse over the text,i cant see the english translation!

But how is span different from id? I can single stuff out with both of them for CSS, but apparently I can also do that with class too. None of these courses, and none of the books i read, ever clearly explain a difference between any of these. What makes each of them unique? In what specific situations would I use them in, and which ones should i absolutely not?

Start by thinking only HTML. Forget styles and go back to the days when all we had to identify page fragments was the anchor element. Oh, you don’t remember those days. Well, it was before id even existed, and CSS was in its infancy.

The goal of HTML has always been semantics right from the start. A SPAN element had meaning in that it was set apart from other inline text but did not interfere with normal flow. A typical concern of the day was language differeniation so span was used to contain language change. Guess what? The same applies to this day.

<span lang="es" title="good luck">buena suerte</span>

When CSS was introduced we dressed up spans like this with dashed underlines, &c.

1 Like

Thanks for this answer, definitely so nice to see it with examples !

1 Like

Very helpful way of explaining this concept, thanks!

1 Like

Great explanation for the newbie!! Thanks a bunch!!

1 Like

I think it means like a tooltip, some info that pops up when we drag our mouse to some text or image and it gives us extra information.

When I mouse over the italicized word “laissez faire” it does nothing. I don’t see any translation or anything. It does nothing. @mtf The solution you gave me now works… thanks.

1 Like

Where did you mouseover, in the opening post? I tried it in the LE browser and it works as expected.

Go to this lesson page,

https://www.codecademy.com/courses/learn-html/lessons/common-html-elements/exercises/review-tags-html

and just under the <body> tag, paste this in and Run.

<p>Capitalism is predominantly conducted in private hands with the government 
taking a <span lang="fr" title="let do"><i>laissez faire</i></span> stand on most 
matters of management.</p>
1 Like