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


Previous Page Page 12 of 39 Next Page


Feedback Form (ExpandCollapse)

What do you think about this web page?






(Optional) Please provide us more details. For example, suppose you select option 2 above, can you tell us specifically what information is missing? You can also suggest anything that can help us improve this web page.

(Optional) Your name:

(Optional) Your email address:

Please enter again to confirm:

Due to the amount of messages we received, we may not be able to reply to all messages.