9.1. Using the span Element
Sometimes, you want to treat some text in a paragraph, or even a headline, differently from the rest of the text of which it is a part. For example, you might want to change the font, or some font characteristic, such as size or color, of one or two words in the midst of a paragraph. Obviously, you can't create a new paragraph within the existing paragraph without completely messing up the formatting of the page.
That's where the <span> tag comes in. A <span> tag creates an inline collection of text to which styles can be applied. A <span> tag is similar to a <div> tag, but is treated as an inline element by default instead of a block element.
As you might expect, a span element can be connected to an ID or class where its style properties are defined, or it can be assigned inline styles.
The span element is most useful for assigning special font properties, and some of the more esoteric text decorations and effects discussed later in this chapter.
For example, Figure 9-1 shows a case where the designer wanted to emphasize two words by increasing their size relative to the type around them.
Figure 9-1. Using the span Element to Oversize Two Words
Here's the HTML for the page that produces that result. The style rule and span element are shown in bold, so you can easily spot the important point in this code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demonstrating <span> Element Usage</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.bigtype {
font-size: 2em;
}
-->
</style>
</head>
<body>
<p>This text is going along quite swimmingly but the designer
wants <span class="bigtype">two words</span> greatly
emphasized, so she uses a <span> element and
identifies with a stylesheet setting to create the desired
effect.</p>
</body>
</html>
As you'll see, as we move through this chapter, the span element comes in quite handy when you want to do any kind of special formatting on substrings within other text elements.