CS 100 (Learn) — CS 100 (Web) — Module 08

CSS :: Flow (span and div)

There may be times you want to add style to an element of a web page but there are no appropriate HTML tags.

For example, you may be making a website for children and want to highlight the nouns in a sentence.

You could make them bold or italic, but that's not really what those tags are for.

Fortunately, there is a special HTML tag created for exactly this purpose: <span>.

Let's see an example of the <span> tag:

The quick brown <span>fox</span> jumps over the lazy <span>dog</span>.

The quick brown fox jumps over the lazy dog.

This example may be confusing because it seemed to have no visual effect on the text between the <span> opening tag and the </span> closing tag.

This is actually the expected behaviour of the <span> tag: no visual effect.

Let's now apply style to the span, and its purpose will become more evident:

.noun { 
  color: white;
  background-color: blue;
}

The quick brown <span class="noun">fox</span> jumps over the lazy <span class="noun">dog</span>.

The quick brown fox jumps over the lazy dog.

The primary purpose of the <span> tag is so you can apply style to elements where no other HTML tag is appropriate.

The <span> tag is designed for elements that are inline of text, and flow horizontally. One property of an element that flows is that it can wrap around to the following line. Text content is the most obvious example of horizontally flowing elements, but <span> is more universal and can be used for non-textual content.

The div tag

The counterpart to the "horizontal" <span> tag is the "vertical" <div> tag. Conceptually, the role of <div> in a web page is similar to the role of a paragraph (<p>) in a body of text.

In practice, a <div> is more flexible than a paragraph because you can nest a <div> inside of another <div> and a <div> can contain non-textual elements such as images or tables.

A <div> tag describes a vertical region or block of a web page. <div>s are normally stacked vertically on top of each other, but they can also be placed horizontally (for example, a web page with multiple columns of text), but that is quite different than using <span> because they do not "wrap around" or appear inline of text.