XHTML Span - Creating Inline Spans
The XHTML span tag alows you to further organize your page's content into smaller chunks or spans of
information. By naming spans of text, you can use Cascading Style Sheets (CSS) to apply
styles to those regions in a global manner. The XHTML span tag simplifies the
development of advanced layouts by further decoupling a page's content from its' presentation on a more granular level.
XHTML <span> Example
Here's an example XHTML code fragment that shows a typical use of the span tag,
used to apply various formatting to certain in-line aspects of a page's contents:
Code Sample:
 <p>The XHTML span tag is useful for applying inline styles such as a different font
<span style="font-size:large;">size</span> or <span style="color:red;">color</span>
to your content.</p>
<p>You'll find that the span tag is <span style="font-style:italic;">very</span>
helpful in maintaining consistent styles across your site.</p>
| 
 |
The preceeding XHTML span example shows how you might use span tags to mark up certain
aspects of a page, for example, code fragments, which might be displyed using a monospace font like courier new -- or
to bring attention to certain key words that might require special emphasis, for example, through the application
of an underline, bold, or larger font face. Every enclosed <span> references
either a class or an id, which corresponds to a particular
style defined in a stylesheet somewhere else - typically in a separate file. Using XHTML span you
could then update your styles for code text, or emphasis text, or whatever, simply by updating a single stylesheet,
rather then manually going through all of your documents, which is more managable and saves time.
Code Sample — browser view
XHTML Span Tutorial
To break up a page into different divisions, follow these steps:
- At the start of the division, type "<span"
- Optionally type in id="name", where name uniquely identifies the span of content.
- Optionally type in class="name", where name corresponds to the name of the class that the span belongs to.
- Type ">" to complete the opening span tag.
- Type in the contents of the span.
- Complete the span typing "</span>"
Tips and Tricks on How to use the XHTML Span Tag
- A span tag has no inherent formatting - you need to associate it with a
particular style defined elsewhere, using the class or id attribute.
- The difference between id and class is that id
is for identifying individual, unique elements, where as class is used for a group of elements.
- We'll learn how to use span with CSS later in the CSS tutorial section.
- Don't use font tags to style inline elements - use span tags instead! That's the XHTML way!
