The elements <span> and <div> are used to group and structure a document and will often be used together with the attributes class and id.

In this lesson, we will take a closer look at the use of <span> and <div> as exactly these two HTML elements are of central importance with regards to CSS.

  • Grouping with <span>
  • Grouping with <div>

Grouping with <span>

The element <span> is what you could call a neutral element which does not add anything to the document itself. But with CSS, <span> can be used to add visual features to specific parts of text in your documents.

An example of this could be this Benjamin Franklin quotation:


<p>Early to bed and early to rise
makes a man healthy, wealthy and wise.</p>

Lets us say we want what Mr. Franklin sees as the benefits of not sleeping your day away emphasized in red. For that purpose, we can mark the benefits with <span>. Each span is then added a class, which we can define in our style sheet:


<p>Early to bed and early to rise
makes a man <span>healthy</span>,
<span>wealthy</span>
and <span>wise</span>.</p>

The CSS belonging to it:


span.benefit {
	color:red;
}

Of course you may also use id to add style to the <span>-elements. Just as long as you remember, that you’ll have to apply a unique id to each of the three <span>-elements, as you learned in the previous lesson.

Grouping with <div>

Whereas <span> is used within a block-level element as seen in the previous example, <div> is used to group one or more block-level elements.

Aside from this difference, the grouping with <div> works in more or less the same way. Let us take a look at an example with two lists of U.S. presidents divided into their political affiliations:


<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>

<div id="republicans">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>

And in our style sheet, we can utilize the grouping in the exact same way as above:


#democrats {
	background:blue;
}

#republicans {
	background:red;
}