Why would we want to separate small pieces of content?



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


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.

FAQ: Learn HTML Elements – Intro to HTML – Displaying Text

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>


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


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

Span and Id tags

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


Thank you for this detailed answer.


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


thanks for this explanation…very good


very helpful answer.thanks!


MTF duuuuuuuude thanks for that example!