9.2. The
Span Element
The
<span> element is used in the same way as the <div>
element. The difference is that the <div> element is used to
enclose one or more block elements (e.g. <p>, <h1> to
<h6>, <table>, etc) while the <span> element is
used to enclose a section (e.g. some text) in a block element.
The
usage of the <span> tag is illustrated in the following two
XHTML MP/WAP CSS examples. Both XHTML MP/WAP CSS examples give the
same result in mobile phone browsers. The first example and the
second example demonstrate the use of the <span> tag with the
class attribute and the style attribute respectively.
(spanEg1.xhtml)
<?xml
version="1.0"?> <!DOCTYPE html PUBLIC
"-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"> <head> <style
type="text/css"> .wcss_class { color:
blue } </style> <title>WCSS
Tutorial</title> </head>
<body> <h1><span
class="wcss_class">Table of
Contents</span></h1> <hr/> <p> <span
class="wcss_class">WCSS Tutorial</span>
Chapter 1<br/> <span class="wcss_class">WCSS
Tutorial</span> Chapter 2<br/> <span
class="wcss_class">WCSS Tutorial</span>
Chapter 3<br/> </p> </body> </html>
(spanEg2.xhtml)
<?xml
version="1.0"?> <!DOCTYPE html PUBLIC
"-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"> <head> <title>WCSS
Tutorial</title> </head>
<body> <h1><span
style="color: blue">Table of
Contents</span></h1> <hr/> <p> <span
style="color: blue">WCSS Tutorial</span>
Chapter 1<br/> <span style="color:
blue">WCSS Tutorial</span> Chapter
2<br/> <span style="color: blue">WCSS
Tutorial</span> Chapter
3<br/> </p> </body> </html>
In
the above two examples, the WCSS style rule "color: blue"
is applied to the text enclosed in the <span></span>
tags. The text outside <span></span> tags remains in its
default color, that is black. The screenshots of the examples in
mobile phone browsers are shown here:

 Sony
Ericsson T610
|

 Nokia
Mobile Browser 4.0
|
Feedback Form (ExpandCollapse)
|
|