Why would we want to separate small pieces of content?

Question

This exercise says that <span> elements are used to “separate small pieces of content”. Why would we want to separate small pieces of content?

Answer

It’s not that we necessarily want to separate content so much as we want to “mark it up” so that we can target it more specifically. There are all kinds of reasons for targeting specific pieces of content. For example, we may wish to use CSS to style the <span> content differently than the other content of a page.

43 Likes

One such example is when coding a page with more than one human language.

<html lang="en">

and in the body of the document,

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

CSS

span[lang="fr"] {
  font-style: italic;
  text-decoration: underline;
}

span_lang

Note the use of the title attribute to provide an English language literal translation when the text is moused over.

388 Likes

Thanks! This kind of Q&A’s is way better to understand with examples like this.

68 Likes

Thank you for this detailed answer.

6 Likes

Sweet! Your explanation absolutely made my day :+1:

7 Likes

thanks for this explanation…very good

4 Likes

very helpful answer.thanks!

4 Likes

MTF duuuuuuuude thanks for that example!

3 Likes

Extremely helpful example. Thanks

3 Likes

Thanks lot for this explanation, I'm enjoying very much this course

3 Likes

Agreed - thank you for your example explanation. I’m chuffed I can understand it!

3 Likes

Short and useful. Also, great job for providing example. Thanks

4 Likes

Throwing in with the crowd: That example is excellent and opens up a lot of understanding about things besides just the question at hand, while doing so in an elegant and easy to understand way. Thanks for writing it!

5 Likes

Perfecto, muchas gracias por la explicación!!

3 Likes

Hi! I’m a real beginner, so my question is: Since the text “laissez faire” is included in the code, and the translation was also, what was the point of the “lang=“fr”” within the span tags? Thanks!

To advise the user agent of a change of human language in the text. A screen reader will tell the user that they have encounted a language other than English, and if verbosity is not turned off, will read to them the translation in the title attribute.

11 Likes

Ohh…Thanks for your quick reply! I’ve hit a snag - verbosity? I know what the word means, but as of yet not encountered it in my experience with computing. So this has to do with screen reader integration. Is that where the “verbosity” setting is? Hmm. I think I need to learn a bit more about this.

So verbosity off, and the screen reader just says “Lazy Fair” or verbosity on and it will state aloud that there is a foreign word, and speak the translation?

Sorry if I sound like a total spaz. It’s just that I’m a total spaz.

3 Likes

verbosity, when turned on can be quite chatty, so a lot of users turn it off. In coding, verbosity refers to such things as in depth error message reporting, or it can even refer to code bloat. At any length, there is a lot being said.

Yes. But not only screen readers depend upon this meta data, search engines do, too.

I can’t say with certainty. One expects the screen reader will advise of the change in human language, but will not read the title value.

5 Likes

Thank you so much for your help! I now understand that there are more things to consider besides the website just working for common browsers. Something about SEO I also learned, because I guess when needing that data for search engines, they’ll rate the quality of your site higher.

Very cool. Thanks for your help, mtf!

2 Likes

There are over 200 criteria that SE’s use to rate/rank a page/site, with quality being pretty high up on that list.

4 Likes