The <span> Element

Span elements provide a simple mechanism for inline formatting of text. In its simplest form HTML for a span bears the form

<span>Formatted text</span>

By itself, such a span specification would be practically useless. In order to use spans one would, at the very least, do one of the following

• Style the enclosed text by assigning the class attribute.
• Assign inline style information via the style attribute.
• Assign the id attribute so the element can be accessed and manipulated using JavaScript.

Spans are very amenable to CSS styling and share the following attributes in common with other HTML elements

• The class attribute is discussed here. One can locally alter some aspects of the assigned style by defining an inline style using the code style="color:...". Needless to say, only those style attributes that require altering/adding need to be specified.
• The id attribute is discussed here.
• The events available across all three browsers - Firefox, Opera and IE - are discussed here.
• The style attribute is used to assign inline CSS styling information to the element. The specification takes the form style="color:...". Inline styling should be used sparingly to temporarily override CSS attributes inherited from a class specification.

Using spans to format inline text is extremely useful. However, the need to specify a class attribute means that one ends up adding several bytes of text per span. On this site we reduce this burden by identifying the most commonly used inline formatting and simply redefining some of the more obscure intrinsic HTML styles such as <addr>, <big> etc. This results in more compact web pages. There is a downside to using such a strategy - screen reader software may get quite confused by inappropriately used restyled intrinsic tags. This is a risk you must assess for the site you are developing and make a decision as to whether it is worthwhile.