HTML & XHTML: The Definitive Guide, 5th Edition

Tagless Styles: The <span> Tag

Up to now, we have used cascading style sheets to change the appearance of content within a designated tag. In some cases, however, you may want to alter the appearance of only a portion of a tag’s contents — usually text. Designate these special segments with the <span> tag.

<span>

Function

Delimits an arbitrary amount of text

Attributes

class, dir, id, lang, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, style, title

End tag

</span>; never omitted

Contains

html_content

Used in

body_content

The <span> tag simply delimits a portion of content (constrained by normal tag-nesting rules, of course). Browsers treat the <span> tag as another physical or content-based style tag — the only difference is that the default meaning of the <span> tag is to leave the text alone.

Although it is now deprecated, the <span> tag became part of HTML so that you could apply style, display, and event management to an arbitrary section of document content. Define a style for the <span> tag as you would any other HTML or XHTML tag:

span {color: purple}
span.bigger {font-size: larger}

and use it like any other HTML or XHTML tag:

Quat harvest projections are <span class=bigger>bigger than ever</span>!

Similarly, apply an inline style to the <span> tag to modify the appearance of its contents:

Quat harvest projections are <span style="font-size: larger">bigger than ever</span>!

Like any other physical or content-based ...